Блог

Я создал предупреждающее сообщение Jquery slidedown, которое по какой-то причине отключает кнопку отправки, как только она появляется.

Мой код 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 slidedown, сообщающее пользователю, что 3 варианта — это предел.
• Даже если появится предупреждающее сообщение, пользователи все равно смогут нажать на кнопку отправки, пока выбран параметр 1.

Но, как вы видите, проблема начинается при появлении сообщения slide down, кнопка отправки становится отключенной. Почему это происходит с кнопкой отправки? Пожалуйста, объясните подробно, а еще лучше покажите мне, как это делается, я новичок в jQuery и я почти уверен, что мой код jQuery можно не только исправить, но и упростить. Спасибо!

Я бы постарался полностью переписать ваш обработчик кликов.

Вы использовали два разных обработчика щелчков и перепутали логику условия.
Таким образом, по 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 amp;amp; 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 обновлен.