JQuery slidedown alert message disables submit button

Question

I created a Jquery slidedown alert message that for some reason disables the Submit Button as soon as it appears.

My jQuery code is working perfect until the slidedown message appears: https://jsfiddle.net/godsnake/t0cswbpo/141/

    $(document).ready(function(){

      var limit = 3;
      $("li").on("click", "a", function(e){
        e.preventDefault();

        if($("a.active").length >= limit) {
          $("#message").slideDown();
          if($(this).hasClass("active"))
          {
          $(this).toggleClass("active");
           $("#message").slideUp();
          }

        }else{
         $("#message").slideUp();
         $(this).toggleClass("active");
        }
      });

    });

     $(document).ready(function(){


      $('li:not(.active)').on("click", "a", function(e){
        e.preventDefault();

        if($('li:not(.active)'))

        {

         $('#register').prop('disabled', true);

          if($(this).hasClass("active"))
          {
          $('li').toggleClass("active");
            $('#register').prop('disabled', false);      
          }

        }else{
        $('#register').prop('disabled', false); 
         $(this).toggleClass("active");
        }
      });

});

CSS:

#message{display:none; color:red; margin-top:-5px!important;}


li {
  display: inline-block;
}

HTML

<div class="mt-3 container position-relative">



    <div class="m-0 p-0 mobiletitle sentence" 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>

What I'm trying to accomplish is the following:

• Submit button should be disabled by default
• When the user selects at least one of the options the button becomes enabled
• If the user selects more than 3 options they are prevented from selecting any more options, and a JQuery slidedown alert message appear to let the user know that 3 options is the limit.
• Even if the alert message appears the users should still be able to CLICK on the Submit button as long as a 1 option is selected.

But as you see the problem start when the slide down message appears, the submit button becomes disabled. Why is this happening to the submit button? Please explain with detail and better yet show me how is done, I'm a novice in jQuery and I'm pretty sure my jQuery code can not only be fixed but simplified. Thank you!

Answer 1

I would tend to rewrite your click handler squarely.

You used two diferent click handlers and got mixed up in the condition logic.
So on a a click, if the li doesn't have the active class, both handlers execute... That probably is why you have some unexepected behavior.

Additionnaly, the active class is applyed on both li and a... Which is useless.

Have a look at this more simple way to code the conditions in one single click handler:

    I used a :disabled CSS rule just to make the button's disabled state obvious.

$(document).ready(function(){

  var limit = 3;
  $("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) {
      $("#message").slideDown();
    }else{
      $("#message").slideUp();
    }

    // Condition to enable/disable the button
    if(active_length > 0 && active_length <= limit){
      $('#register').prop('disabled', false);
    }else{
      $('#register').prop('disabled', true);
    }

  });

});

#message{display:none; color:red; margin-top:-5px!important;}


li {
  display: inline-block;
}

:disabled{
  color: red !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<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" 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>

JSFiddle updated.