这篇博客介绍了如何使用jQuery实现复选框的选择限制，确保用户在多个选项中最多只能选择四个，并且一旦选中后无法再进行更改。通过示例代码展示了如何监听复选框点击事件并实时更新选中数量，当达到限制时禁用所有复选框。此外，还提供了获取选中项数量的方法。
有这么一个需求，在多个复选框中最多选四个，并且复选框一旦选中之后，就不能再次选择。用JQuery实现不难，在这里简单记录一下，先看看下面的效果演示吧。
效果演示
你喜欢下面哪些网站，最多选4个。多过4个就没得选～
www.nowamagic.net
www.google.com
www.163.com
www.qq.com
www.g.cn
www.zhengzeyan.net
news.163.com
mail.163.com
JQuery Code
$(document).ready(function(){
$('input[type=checkbox]').click(function(){
$(this).attr('disabled','disabled');
if($("input[name='group1']:checked").length >= 4)
{
//alert("test");
$("input[name='group1']").attr('disabled','disabled');
}
});
$("#compute").click(function(){
$('input').live('click',function(){
//alert($('input:checked').length);
$("#show").html($('input:checked').length);
});
})
})
通过jQuery获取checkbox选中项的个数，需要用到jQuery的size()方法或length属性，下面的例子是通过length属性获得checkbox选中项的个数。
或者下面的代码也可以：
function check(){
var boxArray = document.getElementsByName('oBox');
var total = 0;
for(var i=0;i
if(boxArray[i].checked){
total++;
}
}
if(total>0){
if(window.confirm('共选中'+total+'首歌，是否继续？')){
window.open('about:blank','SubWin','');
return true;
}
else{
return false;
}
}
else{
window.alert('没有选择！') ;
return false;
}
}
歌曲一
歌曲二
歌曲三
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
