javascript - 是否可以允许用户仅选择一个复选框(bootstrap checkbox-x)？

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

确实，您可以而且可能应该使用 radio 输入字段，但如果您确实想使用复选框，则可以。您可以收集您要定位的所有复选框。

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 语句来切换复选框状态。如果您只想禁用它们，可以将其删除。