Base Bootstrap

For SO question #55186044 - V2

by godsnake

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<div class="mt-3 container position-relative">



  <div class="m-0 p-0 mobiletitle sentence alert-danger" id="message">Please only choose 3 options.</div>

  <div class="mt-2 mt-md-2 mt-lg-3 list-group d-inline-block text-left">
    <li> <a class="mb-3 btn btn-outline-primary sentence">Option 1</a> </li>		
    <li> <a class="mb-3 btn btn-outline-primary sentence">Option 2</a> </li>
    <li> <a class="mb-3 btn btn-outline-primary sentence">Option 3</a> </li>
    <li> <a class="mb-3 btn btn-outline-primary sentence">Option 4</a> </li>
    <li> <a class="mb-3 btn btn-outline-primary sentence">Option 5</a> </li>

    <li> <a class="mb-3 btn btn-outline-primary sentence">Option 6</a> </li>
    <li> <a class="mb-3 btn btn-outline-primary sentence">Option 7</a> </li>
    <li> <a class="mb-3 btn btn-outline-primary sentence">Option 8</a> </li>
  </div>

  <input id="register" disabled class="border-0 font-weight-bold btn-secondary text-uppercase sentence py-3 btn-lg btn-block" name="submit" type="submit" value="Submit Form"/>




</div>

CSS

#message{
  display:none;
  position: relative;
  top: 0;
  padding: 0.4em !important;
  width: calc(98% - 0.8em);
  
}


li {
  display: inline-block;
}

:disabled{
  color: red !important;
}

JavaScript

$(document).ready(function(){

// Simulating 100 options!! For fun!
for(i=8;i<100;i++){
  $(".list-group").append('<li> <a class="mb-3 btn btn-outline-primary sentence">Option '+(i+1)+'</a> </li>')
}



  var limit = 3;
  var message = $("#message");
  var register = $('#register');
  var msg_delay = 1500;  // milliseconds
  
  
  $("li").on("click", "a", function(e){
    e.preventDefault();

    // Toggle the active class on the clicked element
    $(this).toggleClass("active");

    // How many active now?
    var active_length = $("a.active").length;

    // Condition to slide the message up or down
    if(active_length > limit) {
    
      // Revert the active toggling done above.
      $(this).toggleClass("active");
      
      // Disable the Register button while the message is shown
      register.prop('disabled', true);
      
      // Show the message
      message.slideDown(function(){
      
        // Once shown, wait a little before hiding the message
        // and re-enabling the register button
        setTimeout(function(){
          message.slideUp();
          register.prop('disabled', false);
        },msg_delay);
      });

      // Stop the script execution HERE (What's below will NOT be executed.)
      return;
    }


    // Condition to enable/disable the button
    // The condition is simplified since the limit never will be exceeded
    if(active_length > 0){
      register.prop('disabled', false);
    }else{
      register.prop('disabled', true);
    }

  });

});