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。

jQuery向下滑动警报消息禁用“提交”按钮

1 个答案: