Как ограничить количество флажков АКТИВНЫЕ кнопки до 3 за один раз?

Question

ОБНОВЛЕНИЕ: Как изменить состояние ACTIVE в Jquery, чтобы ограничить его 3-мя активными кнопками?

У меня проблемы с созданием простой группы кнопок-флажков, где пользовательМожно выбрать только 3 активных кнопки-флажка одновременно.

Я пытался использовать JQuery, но я почти уверен, что делаю что-то не так.Этот код работает только для самих флажков, но не для активного класса, используемого в кнопках флажков Bootstrap.Чтобы повторить эту проблему, вам нужен последний загрузчик.Вот скрипка: https://jsfiddle.net/godsnake/t0cswbpo/4/

Пожалуйста, помогите мне разобраться, я полный нуб в Jquery и JS, и я предполагаю, что именно так вы решаете эту проблему.

JQuery:

var limit = 3;

    $('input.single-checkbox').on('change', function(evt) {
       if($(this).siblings(':checked').length >= limit) {
           this.checked = false;
       }
    });
    <div class="btn-group-toggle pricing-levels-3 d-inline-block" data-toggle="button-checkbox">

HTML

   <div class="btn-group-toggle" data-toggle="button-checkbox">
    <label class="btn btn-primary">
      <input type="checkbox"> Option 1
    </label>
    <label class="btn btn-primary">
      <input type="checkbox"> Option 2
    </label>
    <label class="btn btn-primary">
      <input type="checkbox"> Option 3
    </label>
        <label class="btn btn-primary">
      <input type="checkbox"> Option 4
    </label>
        <label class="btn btn-primary">
      <input type="checkbox"> Option 5
    </label>
  </div>

Answer 1

Я только что понял это после того, как поигрался с jQuery, надеюсь, этот ответ поможет другим с такой же проблемой:

Это правильный код jQuery, чтобы ограничить нажатие 3 кнопок и дополнительно отобразитьсообщение о том, что вы достигли предела в 3 варианта.

Вот JQuery

$(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");
    }
  });

});

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> 

И CSS:

#message{display:none; color:red; margin-top:-5px!important;}

li {
  display: inline-block;
}

Это полная скрипка: https://jsfiddle.net/godsnake/t0cswbpo/61/

Answer 2

Вы можете использовать метод querySelectorAll и передать ему селектор, такой как input[type='checkbox']:checked, который вернет NodeList проверенных элементов флажка.Если длина этого списка больше требуемого максимума, запретите пользователю ставить флажок:

const max = 3;

document.addEventListener('change', function(e) {
  if (e.target.tagName == 'INPUT') {
    if (document.querySelectorAll(".btn-group-toggle input[type='checkbox']:checked").length > max) {
      e.target.checked = false;
      console.log(`${max} buttons are alraedy checked!`);
    }
  }
});

<div class="btn-group-toggle pricing-levels-3 d-inline-block" data-toggle="button-checkbox">


  <label class="btn btn-secondary">
    <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike" type="checkbox" autocomplete="off"> Checked
  </label>

  <label class="btn btn-secondary">
    <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike" type="checkbox" autocomplete="off"> Checked
  </label>



  <label class="btn btn-secondary">
    <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike" type="checkbox" autocomplete="off"> Checked
  </label>

  <label class="btn btn-secondary">
    <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike" type="checkbox" autocomplete="off"> Checked
  </label>

</div>