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

最新推荐文章于 2023-07-05 16:55:15 发布

luzhuxi

最新推荐文章于 2023-07-05 16:55:15 发布

阅读量997

点赞数

分类专栏： javascript 文章标签： xhtml javascript html function 网易百度

本文链接：https://blog.csdn.net/luzhuxi/article/details/3976367

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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" οnclick="Count_selected()" />百度</label><br/>
<label><input name="vote" type="checkbox" id="vote_2" value="b" οnclick="Count_selected()" />Google</label><br/>
<label><input name="vote" type="checkbox" id="vote_3" value="c" οnclick="Count_selected()" />Yahoo</label><br/>
<label><input name="vote" type="checkbox" id="vote_4" value="d" οnclick="Count_selected()" />网易</label><br/>
<label><input name="vote" type="checkbox" id="vote_5" value="e" οnclick="Count_selected()" />搜狐</label><br/>
<label><input name="vote" type="checkbox" id="vote_6" value="f" οnclick="Count_selected()" />TOM</label><br/>
<label><input name="vote" type="checkbox" id="vote_7" value="g" οnclick="Count_selected()" />新浪</label><br/>
<label><input name="vote" type="checkbox" id="vote_8" value="h" οnclick="Count_selected()" />CCTV</label><br/>
<label><input name="vote" type="checkbox" id="vote_9" value="i" οnclick="Count_selected()" />凤凰网</label><br/>
<label><input name="vote" type="checkbox" id="vote_10" value="j" οnclick="Count_selected()" />淘宝</label><br/>
</body>
</html>