jquery限制checkbox复选框选中数目
分类：实例代码
在很多实际应用中，都会限制checkbox选中的数目，具体场景这里就不多介绍了。
下面直接看实例代码是如何实现此功能，如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>前端教程网</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[type=checkbox]').click(function() {
$("input[name='antzone']").attr('disabled', true);
if ($("input[name='antzone']:checked").length >= 3) {
$("input[name='antzone']:checked").attr('disabled', false);
} else {
$("input[name='antzone']").attr('disabled', false);
}
});
})
</script>
</head>
<body>
<ul>
<li><input type="checkbox" name="antzone" value=1 />前端教程网一</li>
<li><input type="checkbox" name="antzone" value=2 />前端教程网二</li>
<li><input type="checkbox" name="antzone" value=1 />前端教程网三</li>
<li><input type="checkbox" name="antzone" value=4 />前端教程网四</li>
<li><input type="checkbox" name="antzone" value=6 />前端教程网五</li>
<li><input type="checkbox" name="antzone" value=7 />前端教程网六</li>
<li><input type="checkbox" name="antzone" value=8 />前端教程网七</li>
</ul>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
(1).$(document).ready(function() {}），文档结构完全加载完毕再去执行函数中的代码。
(2).$('input[type=checkbox]').click(function() {})，为复选框注册click事件处理函数。
(3).$("input[name='antzone']").attr('disabled', true),首先将复选框设置为不可用。
(4).if ($("input[name='antzone']:checked").length >= 3) {
$("input[name='antzone']:checked").attr('disabled', false);
} 如果选中的复选框大于等于3个，那么就将选中的复选框处于可用状态，其他没有选中的不可用。
(5).else {
$("input[name='antzone']").attr('disabled', false);
},如果选中的不大于等于3个，那么全部都是可用的。
二.相关阅读:
(1).input[type=checkbox]可以参阅jQuery [attribute=value]一章节。
(2).attr()方法可以参阅jQuery attr()一章节。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu