Question

我有一个带有一组复选框的HTML表单，如何让用户只能检查固定数量的复选框

Answer 1

此示例将在检查每个输入后对已检查输入的数量进行计数，并与允许的最大数量进行比较。如果超过最大值，则禁用其余复选框。

jQuery(function(){
    var max = 3;
    var checkboxes = $('input[type="checkbox"]');

    checkboxes.change(function(){
        var current = checkboxes.filter(':checked').length;
        checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
    });
});

以下是一个工作示例 - http://jsfiddle.net/jaredhoyt/Ghtbu/1/

Answer 2

这会对每个复选框绑定一些逻辑，检查当前表单中检查的复选框数量。如果该数字等于2，我们将禁用所有其他框。

$("form").on("click", ":checkbox", function(event){
  $(":checkbox:not(:checked)", this.form).prop("disabled", function(){
    return $(this.form).find(":checkbox:checked").length == 2;
  });
});

这适用于每个表单，这意味着您可以拥有多个不接触彼此输入的表单。在下面的演示中，我展示了三种形式，所有形式都包含三个复选框。 2个复选框的限制仅限于各自的形式。

演示：http://jsbin.com/epanex/4/edit

在表单中选中限制复选框

2 个答案: