JQuery slidedown 警告消息禁用提交按钮

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 class，则两个处理程序都会执行...这可能就是您出现某些意外行为的原因。

此外，active class 同时应用于 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.

JQuery slidedown 警告消息禁用提交按钮

JQuery slidedown alert message disables submit button

jquery

button

bootstrap-4

slidedown

prop