在表单中选中限制复选框

我有一个带有一组复选框的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个复选框的限制仅限于各自的forms。

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