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

Question

我创建了一个Jquery slidedown警告消息，由于某种原因，它会在出现时立即禁用“提交”按钮。

我的jQuery代码工作正常，直到出现slidedown消息：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 slidedown警告消息，让用户知道3个选项是限制。
• 即使出现警报消息，只要选择了1选项，用户仍应能够单击“提交”按钮。

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

Answer 1

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

您使用了两个不同的点击处理程序，并在条件逻辑中混淆了。 所以在a点击，如果li没有active类，两个处理程序执行...这可能是你有一些未预料到的行为的原因。

另外，qazxsw poi类适用于qazxsw poi和qazxsw poi ...这是无用的。

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

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

a

:disabled

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);
    }

  });

});

。