Question

更新：如何更改Jquery上的ACTIVE状态以将其限制为3个Active State Buttons？

我在创建一个简单的按钮复选框组时遇到了麻烦，用户一次只能选择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

您可以使用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>

Answer 2

我只是在玩完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/

如何将“活动”按钮复选框的数量一次限制为3个？

2 个答案: