Checkbox 实现限选N个后其它禁用效果

来源：互联网发布：世界网络大会编辑：程序博客网时间：2024/05/16 02:02

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Checkbox 实现限选N个后其它禁用效果</title>
<script language="javascript">
function Count_selected(){
n=0;
//开始检测已选中的CheckBox数量

for (i=1;i<=10;i++){ //此处数字10为所有CheckBox数量
   obj=document.getElementById("vote_"+i);
   if (obj.checked){
    n=n+1
   }
}
//如果超过3个，则未选中的禁用

if (n>=3){
   for (i=1;i<=10;i++){
    obj2=document.getElementById("vote_"+i);
    if (!obj2.checked){
     obj2.disabled=true;
    }
   }
}
//如果不超过三个，所有CheckBox可用
else{
   for (i=1;i<=10;i++){
    obj2=document.getElementById("vote_"+i);
     obj2.disabled=false;
    }
}
}
</script>
</head>
<body>
<label><input name="vote" type="checkbox" id="vote_1" value="a" onclick="Count_selected()" />百度</label><br/>
<label><input name="vote" type="checkbox" id="vote_2" value="b" onclick="Count_selected()" />Google</label><br/>
<label><input name="vote" type="checkbox" id="vote_3" value="c" onclick="Count_selected()" />Yahoo</label><br/>
<label><input name="vote" type="checkbox" id="vote_4" value="d" onclick="Count_selected()" />网易</label><br/>
<label><input name="vote" type="checkbox" id="vote_5" value="e" onclick="Count_selected()" />搜狐</label><br/>
<label><input name="vote" type="checkbox" id="vote_6" value="f" onclick="Count_selected()" />TOM</label><br/>
<label><input name="vote" type="checkbox" id="vote_7" value="g" onclick="Count_selected()" />新浪</label><br/>
<label><input name="vote" type="checkbox" id="vote_8" value="h" onclick="Count_selected()" />CCTV</label><br/>
<label><input name="vote" type="checkbox" id="vote_9" value="i" onclick="Count_selected()" />凤凰网</label><br/>
<label><input name="vote" type="checkbox" id="vote_10" value="j" onclick="Count_selected()" />淘宝</label><br/>
</body>
</html>