bootstrap按钮组从多个选中任意两个复选框

Question

我必须从4-5复选框中选择任意2个复选框。制作复选框我正在使用bootstrap。

下面是我的代码

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 4
  </label>
</div>

但我希望我最多可以选择2个复选框。和其他人需要被禁用

我正在使用http://getbootstrap.com/javascript/#buttons-checkbox-radio为此，当我点击特定标签时，禁用其他标签并点击事件

Answer 1

首先添加一个班级<input type="checkbox" class="ch" autocomplete="off">
使用`.change（）事件处理程序在选中/取消选中复选框时触发代码。

$('.ch').change(function() {
      $($('.btn-group').find("input[type='checkbox']")).each(function() {
        $(this).attr("disabled", false);
      });
      var check = $($('.btn-group').find("input[type='checkbox']:checked")).length;
      if (check > 1) {
        $('.btn-group').find("input[type='checkbox']").not(":checked").attr("disabled", true);
      }
    });

以下是jsFiddle中的示例：https://jsfiddle.net/jagrati16/q8jo77c2/

Answer 2

您可以查看以下代码来执行您想要的操作。

$('input[type="checkbox"]').change(function() {
  var number = $('.btn-group').find("input[type='checkbox']:checked").length;
  if (number > 1) {
    $('.btn-group').find("input[type='checkbox']").not(":checked").attr("disabled", true);
  }else {
    $('.btn-group').find("input[type='checkbox']").attr("disabled", false);
  }
});

我也创建了jsfiddle。我希望这能解决你的问题。