There are 10 check boxes, the maximum number of users can only tick 3, otherwise, all the check boxes will be grayed out.
(The user can still select again when the check box is checked out again.) ）
Set the variable part to the parameters of JS to achieve code reuse.
JS Code
The first parameter is the name of the check box, and the second parameter is the maximum allowable tick.
Copy Code code as follows:
function Choicetest (name,num) {
var Choicearr = document.getelementsbyname (name);
var a=0;
for (Var i=0;i<choicearr.length;i++)
if (choicearr[i].checked) {
a=a+1;
}
if (a==num) {
for (Var i=0;i<choicearr.length;i++)
if (!choicearr[i].checked)
choicearr[i].disabled= ' disabled ';
}else{
for (Var i=0;i<choicearr.length;i++)
Choicearr[i].removeattribute (' disabled ');
}
}
Sample Program
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<script language= "JavaScript" >
function Choicetest (name,num) {
var Choicearr = document.getelementsbyname (name);
var a=0;
for (Var i=0;i<choicearr.length;i++)
if (choicearr[i].checked) {
a=a+1;
}
if (a==num) {
for (Var i=0;i<choicearr.length;i++)
if (!choicearr[i].checked)
choicearr[i].disabled= ' disabled ';
}else{
for (Var i=0;i<choicearr.length;i++)
Choicearr[i].removeattribute (' disabled ');
}
}
</script>
<body >
<div width= "513" onclick= "choicetest (' Choice ', 3)" >
<label><input type= "checkbox" name= "Choice" id= "choice" width= "30px;" /></label> option 1
<label><input type= "checkbox" name= "Choice" id= "choice" width= "30px;" /></label> Option 2
<label><input type= "checkbox" name= "Choice" id= "choice" width= "30px;" /></label> option 3
<label><input type= "checkbox" name= "Choice" id= "choice" width= "30px;" /></label> Option 4
<label><input type= "checkbox" name= "Choice" id= "choice" width= "30px;" /></label> Option 5
<p></p>
<label><input type= "checkbox" name= "Choice" id= "choice" width= "30px;" /></label> option 6
<label><input type= "checkbox" name= "Choice" id= "choice" width= "30px;" /></label> Option 7
<label><input type= "checkbox" name= "Choice" id= "choice" width= "30px;" /></label> option 8
<label><input type= "checkbox" name= "Choice" id= "choice" width= "30px;" /></label> Option 9
<label><input type= "checkbox" name= "Choice" id= "choice" width= "30px;" /></label> option 10
</div>
</body>
