限制复选框的数量 [英] Limit Number of Checkboxes Checked
本文介绍了限制复选框的数量的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个包含多个复选框的表单。我在表单中有三类复选框。我需要限制最多三个复选框每类别。
I have a form with several checkboxes. I have three categories of checkboxes in the form. I need to limit to a max of three checkboxes per category.
我使用了这个脚本,但它限制为每个表单有三个复选框。
I used this script but it limits to three checkboxes per form.
jQuery(function(){
var max = 3;
var checkboxes = jQuery('input[type="checkbox"]');
checkboxes.change(function(){
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
});
});
如何修改上述脚本以限制一个表单中每个类别的三个复选框?
How do I modify the above script to limit three checkboxes per category within one form?
HTML示例:
<!-- FORM CODE -->
<!-- Start Categories -->
<label>Cat 1</label>
<!-- Checkboxes for Cat 1 - Max of Three in Category -->
<input type="checkbox" value="Option 1" id="CAT_Custom_365571_0" name="CAT_Custom_365571" />Creative<br />
<input type="checkbox" value="Option 2" id="CAT_Custom_365571_1" name="CAT_Custom_365571" />Euphoric<br />
<input type="checkbox" value="Option 3" id="CAT_Custom_365571_2" name="CAT_Custom_365571" />Uplifted<br />
<!-- More checkboxes -->
<label>Cat 2</label>
<!-- Checkboxes for Cat 2 - Max of Three in Category -->
<input type="checkbox" value="Option 1" id="CAT_Custom_365572_0" name="CAT_Custom_365572" />Option 1<br />
<input type="checkbox" value="Option 2" id="CAT_Custom_365572_1" name="CAT_Custom_365572" />Option 2<br />
<input type="checkbox" value="Option 3" id="CAT_Custom_365572_2" name="CAT_Custom_365572" />Option 3<br />
<!-- More checkboxes -->
<label>Cat 3</label>
<!-- Checkboxes for Cat 3 - Max of Three in Category -->
<input type="checkbox" value="Option 1" id="CAT_Custom_365573_0" name="CAT_Custom_365573" />Option 1<br />
<input type="checkbox" value="Option 2" id="CAT_Custom_365573_1" name="CAT_Custom_365573" />Option 2<br />
<input type="checkbox" value="Option 3" id="CAT_Custom_365573_2" name="CAT_Custom_365573" />Option 3<br />
<!-- More checkboxes -->
<!-- MORE FORM CODE -->
注意: CAT_Custom_365571_2
等由我使用的CMS。
Note: The CAT_Custom_365571_2
etc is generated by the CMS I use.
推荐答案
jQUERY
$("input[name=chk]").change(function(){
var max= 3;
if( $("input[name=chk]:checked").length == max ){
$("input[name=chk]").attr('disabled', 'disabled');
$("input[name=chk]:checked").removeAttr('disabled');
}else{
$("input[name=chk]").removeAttr('disabled');
}
});
HTML
<input type="checkbox" name"chk" value="A"/>A
<input type="checkbox" name"chk" value="B"/>B
<input type="checkbox" name"chk" value="C"/>C
<input type="checkbox" name"chk" value="D"/>D
<input type="checkbox" name"chk" value="E"/>E
<input type="checkbox" name"chk" value="F"/>F
<input type="checkbox" name"chk" value="F"/>G
这篇关于限制复选框的数量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文