Question

我正在使用bootstrap checkbox-x插件：https://github.com/kartik-v/bootstrap-checkbox-x

如何才允许用户只选择一个复选框？

选项1

          <div class="col-md-12 has-success bottom-10 no-padding-left">
              <input class="form-control bottom-15" id="check-2" type="checkbox" data-toggle="checkbox-x" data-size="sm" data-three-state="false">
              <label class="cbx-label" for="check-2">Option 2 </label>
          </div>

          <div class="col-md-12 has-success bottom-10 no-padding-left">
              <input class="form-control bottom-15" id="check-3" type="checkbox"  data-toggle="checkbox-x" data-size="sm" data-three-state="false">
              <label class="cbx-label" for="check-3">Option 3 </label>
          </div>

谢谢！

Answer 1

是的，你可以并且可能应该使用无线电输入字段，但如果你真的想使用复选框，你可以。您可以收集所有目标的复选框。

var chkBox = $('input[type="checkbox"]');

然后在单击复选框后触发单击事件侦听器。然后它将禁用您收集/定位的所有其他复选框。

$(chkBox).on('click', function(){
    if ( $(this).prop( "checked") ) {
        $(this).siblings().prop( "disabled", true);
    } else {
        $(this).siblings().prop( "disabled", false);
    }
});

我添加了一个else语句，用于切换复选框状态。如果您只想禁用它们，可以将其删除。

可以允许用户只选择一个复选框（bootstrap checkbox-x）？

1 个答案: