如何一次将 ACTIVE 按钮复选框的数量限制为 3 个？答案

【问题标题】：How to limit the number of ACTIVE button checkboxes to 3 at a time?如何一次将 ACTIVE 按钮复选框的数量限制为 3 个？
【发布时间】：2019-02-28 20:04:17
【问题描述】：

更新：如何更改 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>

【问题讨论】：

标签： jquery twitter-bootstrap button checkbox bootstrap-4

【解决方案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>

【讨论】：

那也行不通。当您尝试使用引导样式时，它会忽略限制。
i.is.cc/opU4J2A.jpg 这就是 bootstrpa 样式和您的代码的样子。我仍然可以切换所有按钮
是的 - 这实际上只是您可以使用的方法的一个示例。您需要更新 querySelectorAll 中的 CSS 选择器，以便它返回正确的元素。如果你有一个 JS fiddle 的链接或者我可以看看
jsfiddle.net/godsnake/t0cswbpo/8 这个小提琴包含您提供的代码，请查看

【解决方案2】：

我只是在玩弄 jQuery 之后才弄明白，我希望这个答案可以帮助其他有同样问题的人：

这是限制按下 3 个按钮的正确 jQuery 代码，并另外显示一条消息，说明您已达到 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/

【讨论】：