限制允许检查的复选框数量
可能重复：
计算所选复选框的数量而不重新加载页面？
我有一个订单，询问用户他们想要哪种类型的通行证（1-3天），并给他们选择他们想要通行证的日期。
目前，当他们选择3天时，我的JQuery为他们选择所有3个复选框，并在他们选择1或2天时取消选择。 但是，我想要做的是：
当他们选择2天通行证时，它只允许他们检查最多2个盒子。 当他们选择1天通行证时，它只允许他们检查1个方框。
我想知道我的validateDays()函数需要做什么 – 这是运行此validation的最佳方式，或者这是否是实际的最佳路径。
我想使用的每个方法都要求复选框具有相同的名称/ ID – 但由于表单的其他部分（省略），遗憾的是它们不能。
任何想法/指针？
HEAD部分JavaScript：
function validateDays() { $('#matthewpeckham').find('input[type="checkbox"]').click(function () { var pass = parseInt($('input[name="other_1"]:checked').val(), 10) //1,2,3 var days = $('#matthewpeckham').find('input[type="checkbox"]:checked').length; console.log(days, pass); if (days == pass) { $('#matthewpeckham').find('input[type="checkbox"]').not(':checked').prop('disabled', true); } else { $('#matthewpeckham').find('input[type="checkbox"]').not(':checked').prop('disabled', false); } }) $('input[name="other_1"]').change(function () { $('#matthewpeckham').find('input[type="checkbox"]').prop({ 'checked': false, 'disabled': false }); if (parseInt($(this).val(), 10) == 3) $('#matthewpeckham').find('input[type="checkbox"]').prop({ 'checked': true, 'disabled': false }); }); } $(document).ready(function() { jQuery('#3daypass').click(function() { jQuery('#other_2 , #other_3 , #other_4').prop('checked', true); }); jQuery('#2daypass , #1daypass').click(function() { jQuery('#other_2 , #other_3 , #other_4').prop('checked', false); }); });
BODY部分HTML：
这是一个jQuery解决方案： jsFiddle示例
$('input[type="checkbox"]').click(function () { var pass = parseInt($('input[name="other_1"]:checked').val(), 10) //1,2,3 var days = $('input[type="checkbox"]:checked').length; console.log(days, pass); if (days == pass) { $('input[type="checkbox"]').not(':checked').prop('disabled', true); } }) $('input[name="other_1"]').change(function () { $('input[type="checkbox"]').prop({ 'checked': false, 'disabled': false }); if (parseInt($(this).val(), 10) == 3) $('input[type="checkbox"]').prop({ 'checked': true, 'disabled': false }); });
您需要检查validationfunction中的复选框数量：
function validateDays() { var numBoxesChecked = $("input:checkbox:checked").length; if (document.getElementById("2daypass").checked && numBoxesChecked > 2) { // invalid } if (document.getElementById("1daypass").checked && numBoxesChecked > 1) { // invalid } }
请记住，可以绕过任何javascriptvalidation，因此请确保您在服务器上执行某种类型的validation。
另请注意，如果页面上有其他不相关的复选框，您可能需要更改numBoxesChecked选择器，例如将其限制为容器，例如
var numBoxesChecked = $('#someContainer').find("input:checkbox:checked").length;
jQuery公开了一个复选框选择器 ，在这里应该certificate是有用的。
然后，您的validateDays函数可以执行这些操作
var checkedBoxes = jQuery(":checkbox:checked"); var numChecked = checkedBoxes.length; ... else if (document.getElementById("2daypass").checked) { if (numChecked > 2) { /*do something*/ } } else if (document.getElementById("1daypass").checked) { if (numChecked > 1) { /*do something*/ } } else { // DO NOTHING } ...
但是，您可能会遇到“还原”该框的问题。 你可以做到这一点
jQuery(this).prop('checked', false)
我无论如何都不是这方面的专家，但这是我在我的网站上做的，你应该能够修改它以满足你的需要……只记得给你的输入相同的类名。
您也可以使用如下函数进行动态处理：
$('.checkbox').on('click', function(e) { var num_checked = 0; $('.checkbox').each(function() { if ( $(this).prop('checked') ) num_checked++; }); var max_checked = $('input[name="other_1"]:checked').val(); if ( num_checked > max_checked ) { $(this).prop('checked', false); } });
假设你的html做了一些小修改：
演示： http ： //jsbin.com/osecep/1/
它并不完美，你可能想要在天数改变时清除复选框，但这应该让你走上正确的轨道。