S
shree
Hello everyone,
I'm writing a form which will have a group of checkboxes. When user
selects one checkbox, it will automatically disable the rest of the
checkboxes in the group. I'm able to develop this function.
I also would like to provide a 'clear' button which should trigger via
onClick. When 'clear' button is clicked, it should clear 'checked'
checkbox and re-enable disabled (grayed out) checkboxes. I'm not able
to get this function to work and would appreciate if anyone can offer
suggestion and/or an example. Thank you for taking the time.
Best wishes,
Shree
I have posted a link to try out and the code below.
-----
http://www.open365test.net/Ex_Checkbox.html
-----
<html>
<head>
<title>Re-enable Checkbox</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">
<script type="text/javascript">
function ckGrp(ck){
var ck_arr=document.getElementsByName(ck.name);
var ca_ln=ck_arr.length;
if(ck.checked){
for(var i=0;i<ca_ln;i++){
if(ck_arr.id!=ck.id)ck_arr.disabled=true;
}
}else{
for(var i=0;i<ca_ln;i++){
ck_arr.disabled=false;
}
}
}
function ResetGrp(ck){
//alert("ck name is " + ck.name);
alert('Got Here');
var ck_arr=document.getElementsByName(ck.name);
var ca_ln=ck_arr.length;
for(var i=0;i<ca_ln;i++){
ck_arr.disabled=false;
}
}
function showAlert() {
alert('Got Here');
}
</script>
</head>
<body >
<form name = "FormName" action="">
<table width="700" border="0">
<tr>
<td width="18"><div align="left"></div></td>
<td width="169"><div align="left">Group</div></td>
</tr>
<!--1st row -->
<tr>
<td><div align="left"></div></td>
<td><div align="left">
<input type="checkbox" id="ck1" name="Group" value = "Option1"
onclick="ckGrp(this)" />
Option1</div></td>
</tr>
<!--2nd row -->
<tr>
<td><div align="left"></div></td>
<td><div align="left">
<input type="checkbox" id="ck2" name="Group" value = "Option2"
onclick="ckGrp(this)" />
Option2</div></td>
</tr>
<!--3rd row -->
<tr>
<td><div align="left"></div></td>
<td><div align="left">
<input type="checkbox" id="ck3" name="Group" value = "Option3"
onclick="ckGrp(this)" />
Option3</div></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<!--<td><input type="button" value="Click here"
onClick="showAlert();"></td>-->
<td><input type="button" id="ck5" value="Clear" name="Group2"
onClick="ResetGrp();"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</body>
</html>
I'm writing a form which will have a group of checkboxes. When user
selects one checkbox, it will automatically disable the rest of the
checkboxes in the group. I'm able to develop this function.
I also would like to provide a 'clear' button which should trigger via
onClick. When 'clear' button is clicked, it should clear 'checked'
checkbox and re-enable disabled (grayed out) checkboxes. I'm not able
to get this function to work and would appreciate if anyone can offer
suggestion and/or an example. Thank you for taking the time.
Best wishes,
Shree
I have posted a link to try out and the code below.
-----
http://www.open365test.net/Ex_Checkbox.html
-----
<html>
<head>
<title>Re-enable Checkbox</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">
<script type="text/javascript">
function ckGrp(ck){
var ck_arr=document.getElementsByName(ck.name);
var ca_ln=ck_arr.length;
if(ck.checked){
for(var i=0;i<ca_ln;i++){
if(ck_arr.id!=ck.id)ck_arr.disabled=true;
}
}else{
for(var i=0;i<ca_ln;i++){
ck_arr.disabled=false;
}
}
}
function ResetGrp(ck){
//alert("ck name is " + ck.name);
alert('Got Here');
var ck_arr=document.getElementsByName(ck.name);
var ca_ln=ck_arr.length;
for(var i=0;i<ca_ln;i++){
ck_arr.disabled=false;
}
}
function showAlert() {
alert('Got Here');
}
</script>
</head>
<body >
<form name = "FormName" action="">
<table width="700" border="0">
<tr>
<td width="18"><div align="left"></div></td>
<td width="169"><div align="left">Group</div></td>
</tr>
<!--1st row -->
<tr>
<td><div align="left"></div></td>
<td><div align="left">
<input type="checkbox" id="ck1" name="Group" value = "Option1"
onclick="ckGrp(this)" />
Option1</div></td>
</tr>
<!--2nd row -->
<tr>
<td><div align="left"></div></td>
<td><div align="left">
<input type="checkbox" id="ck2" name="Group" value = "Option2"
onclick="ckGrp(this)" />
Option2</div></td>
</tr>
<!--3rd row -->
<tr>
<td><div align="left"></div></td>
<td><div align="left">
<input type="checkbox" id="ck3" name="Group" value = "Option3"
onclick="ckGrp(this)" />
Option3</div></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<!--<td><input type="button" value="Click here"
onClick="showAlert();"></td>-->
<td><input type="button" id="ck5" value="Clear" name="Group2"
onClick="ResetGrp();"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</body>
</html>