时间戳

首页 > 解决方案 > 如何一次将 ACTIVE 按钮复选框的数量限制为 3 个？

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

问题描述

更新：如何更改 Jquery 上的活动状态以将其限制为 3 个活动状态按钮？

我无法创建一个简单的按钮复选框组，其中用户一次只能选择 3 个活动复选框按钮。

活动按钮限制为 3

我尝试使用 JQuery，但我很确定我做错了什么。此代码仅适用于复选框本身，但不适用于 Bootstrap 复选框按钮中使用的活动类。要复制此问题，您需要最新的引导程序。这是一个小提琴： https ://jsfiddle.net/godsnake/t0cswbpo/4/

请帮我解决这个问题，我是 Jquery 和 JS 的完全菜鸟，我猜这就是你解决这个问题的方法。

查询： 

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>

标签： jquerytwitter-bootstrapbuttoncheckboxbootstrap-4

解决方案

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

推荐阅读