JQuery 向下滑动警报消息禁用提交按钮

Question

我创建了一个 Jquery 向下滑动警报消息，由于某种原因，它一出现就禁用了提交按钮。

我的 jQuery 代码运行良好，直到出现下滑消息： 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>

我想要完成的是：

• 提交按钮默认禁用
• 当用户选择至少一个选项时，按钮变为 启用
• 如果用户选择了 3 个以上的选项，他们将被阻止 选择更多选项和 JQuery 向下滑动警报消息 似乎让用户知道 3 个选项是限制。
• 即使出现警告消息，只要选择了 1 个选项，用户仍应能够单击“提交”按钮。

但是当您看到问题开始出现下滑消息时，提交按钮被禁用。 为什么提交按钮会出现这种情况？请详细解释一下，更好地告诉我如何完成，我是 jQuery 的新手，我很确定我的 jQuery 代码不仅可以修复但简化了。谢谢！

Answer 1

我倾向于直接重写您的点击处理程序。

您使用了两个不同的点击处理程序并在条件逻辑中混淆了。
因此，在a 单击时，如果li 没有active 类，则两个处理程序都会执行...这可能就是您出现一些意外行为的原因。

另外，active 类同时应用于 li 和 a... 这是没用的。

看看这种在单击处理程序中对条件进行编码的更简单方法：

    我使用:disabled CSS 规则只是为了使按钮的disabled 状态明显。

$(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.