q - how to reenable disabled checkboxes in a form

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>
 
A

ASM

shree said:
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.

function ResetGrp(ck){
var ck_arr = (document.getElmentById && document.getElementsByName)?
document.getElementsByName(ck) :
document.forms['FormName'].elements[ck];
for(var i=0;i<ck_arr.length;i++){
ck_arr.disabled=false;
ck_arr.checked=false;
}
}


<input type="button" id="ck5" value="Clear" name="Group2"
onClick="ResetGrp('Group');">
 
M

McKirahan

shree said:
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.

[snip]

So you want the look of checkboxes but the functionality of radio buttons.
 
M

McKirahan

shree said:
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

[snip]

Will this help? Watch for word-wrap.

<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,mx){
if(document.getElementById(ck.id).checked){
for(var i=1;i<mx+1;i++){
if (document.getElementById(ck.id).value !=
document.getElementById("ck"+i).value) {
document.getElementById("ck"+i).disabled=true;
}
}
} else {
for(var i=1;i<mx+1;i++){
if (document.getElementById(ck.id).value !=
document.getElementById("ck"+i).value) {
document.getElementById("ck"+i).disabled=false;
}
}
}
}
function ResetGrp(ck,mx){
for(var i=1;i<mx+1;i++){
document.getElementById(ck+i).checked=false;
document.getElementById(ck+i).disabled=false;
}
}
</script>
</head>
<body >
<form name="FormName" action="">
<table border="0" width="187">
<tr>
<td width="18">&nbsp;</td>
<td width="169">Group</td>
</tr>
<!--1st row -->
<tr>
<td>&nbsp;</td>
<td><input type="checkbox" id="ck1" name="ck1" value="Option1"
onclick="ckGrp(this,3)" />Option1</td>
</tr>
<!--2nd row -->
<tr>
<td>&nbsp;</td>
<td><input type="checkbox" id="ck2" name="ck2" value="Option2"
onclick="ckGrp(this,3)" />Option2</td>
</tr>
<!--3rd row -->
<tr>
<td>&nbsp;</td>
<td><input type="checkbox" id="ck3" name="ck3" value="Option3"
onclick="ckGrp(this,3)" />Option3</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><input type="button" value="Clear" onClick="ResetGrp('ck',3);"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</body>
</html>
 
S

shree

S

Stephen Chalmers

shree said:
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.

<td><input type="button" id="ck5" value="Clear" name="Group2"
onClick="ResetGrp();"></td>
<td><input type="submit" value="Submit" /></td>

If you write a function that takes a parameter, it's customary to pass it one:

onClick="ResetGrp('Group');"

Then the simplest change to the function you had, would be:

function ResetGrp(ck)
{
var ck_arr=document.getElementsByName(ck);

var ca_ln=ck_arr.length;

for(var i=0; i<ca_ln; i++)
{
ck_arr.disabled=false;
ck_arr.checked=false;
}

}

A more universal way to assemble the array of the wanted elements would be:

var ck_arr=[];

for( var i=0, f=document.forms['FormName'], len=f.elements.length; i<len; i++ )
if( f.elements.name==ck )
ck_arr[ck_arr.length]=f.elements;


Having said that, to me this looks more like a job for radio buttons...
 
M

Michael Winter

On 14/07/2005 02:36, ASM wrote:

[snip]
function ResetGrp(ck){
var ck_arr = (document.getElmentById && document.getElementsByName)?

Whilst the getElementsByName method is technically more correct on the
basis of the W3C DOM specifications, it will not be as easy to work with
as any matching name, including non-form control elements (in HTML), and
controls in multiple FORM elements will be returned. Unless you can make
guarantees about the document, extra checks will be necessary. The
behaviour of the elements collection, as 'defined' in DOM 0 is pretty
universal.

There is certainly no need to examine the getElementById method. It has
absolutely no relevance to what you're trying to accomplish.

[snip]

Mike
 
A

ASM

Michael said:
There is certainly no need to examine the getElementById method. It has
absolutely no relevance to what you're trying to accomplish.

i.e. to tell NC4.5 : pass your way
I'm sure NC unterstand that, contrary to gEBN

am I wrong ?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,733
Messages
2,569,440
Members
44,831
Latest member
HealthSmartketoReviews

Latest Threads

Top