如何限制选中复选框的数量? [英] How to limit the number of selected checkboxes?
本文介绍了如何限制选中复选框的数量?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下 HTML:
<p><strong>你想要哪个级别?(选择 3 个级别)</strong></p><input class="single-checkbox"type="checkbox";名称=车辆"value=自行车">级别 1<br><input class="single-checkbox";类型=复选框"名称=车辆"value=自行车">Level 2<br><input class="single-checkbox";类型=复选框"名称=车辆"value=自行车">级别 3
<input class="single-checkbox";类型=复选框"名称=车辆"value=自行车">级别 4
<input class="single-checkbox";类型=复选框"名称=车辆"value=自行车">级别 5<br><input class="single-checkbox";类型=复选框"名称=车辆"value=自行车">级别 6<br><input class="single-checkbox";类型=复选框"名称=车辆"value=自行车">级别 7<br>
现场:
http://www.chineselearnonline.com/amember/signup20.php
如何才能让用户只能选择其中的 3 个复选框?
解决方案
使用 change
事件,您可以执行以下操作:
var limit = 3;$('input.single-checkbox').on('change', function(evt) {if($(this).siblings(':checked').length >= limit) {this.checked = false;}});
I have the following HTML:
<div class="pricing-levels-3">
<p><strong>Which level would you like? (Select 3 Levels)</strong></p>
<input class="single-checkbox"type="checkbox" name="vehicle" value="Bike">Level 1<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br>
</div>
Live site:
http://www.chineselearnonline.com/amember/signup20.php
How can I do it so that the user can only select 3 of those checkboxes?
解决方案
Using change
event you can do something like this:
var limit = 3;
$('input.single-checkbox').on('change', function(evt) {
if($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
});
这篇关于如何限制选中复选框的数量?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文