Forum Moderators: open

Message Too Old, No Replies

Checkbox Toggle

disabling & enabling checkboxes

         

rgjb

11:11 pm on Oct 10, 2004 (gmt 0)

10+ Year Member



Hi,

I have designed a leaving form with 18 check boxes. Once a user has selected one, the others are then disabled. This works fine (code below). But my problem is that if a user changes his mind and de-selects the check box, then how can I re-enable all the check boxes. Currently the code disables that one as well.

Here is the calling HTML and Javascript code.
Hoping someone can help
Cheers
Gregg

<TD><INPUT id=reason_2 type=checkbox name=tmReason onclick="&chr(34)&"javascript:Reason('Redundancy');"&chr(34)&"></TD>

Javascript:
function Reason(ReasonName)
{
var tempObj;
var tempOBJ2;

for (i=1; i<=18; i++)
{
tempOBJ=eval("document.EC_11655.reason_" +i);
tempOBJ2 = ReasonName


if (tempOBJ.checked)
{
tempOBJ.value=tempOBJ2
tempOBJ.disabled=false;
alert(tempOBJ.value)
}
else
{
tempOBJ.disabled=true;
tempOBJ.value='FALSE'
}

}

}

Lance

11:57 pm on Oct 10, 2004 (gmt 0)

10+ Year Member



Okay, maybe this is a dumb idea...

Why not use radio buttons?

rgjb

12:08 am on Oct 11, 2004 (gmt 0)

10+ Year Member



Lance,

It's not a dumb idea at all. I guess I was caught in a checkbox loop.

Cheers
Gregg

Bernard Marx

12:14 am on Oct 11, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



function Reason(ReasonName) 
{
var boxes = documentGetElementsByName("tmReason");
var box,k=-1;
while(box=boxes[++k])
{
box.value=box.checked? ReasonName : 'FALSE';
box.disabled=box.checked;

if(box.checked)alert(box.value)
}
}

...ish

Bernard Marx

12:15 am on Oct 11, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



(it's that loop again)

rgjb

12:44 am on Oct 11, 2004 (gmt 0)

10+ Year Member



Bernard,

Thanks for this. Though it seems that the line

var boxes = documentGetElementsByName("tmReason");

causes an "Object Expected" error.
any ideas since I reckon I'll be re-using this code on alot of other forms.

Thanks
Gregg

Rambo Tribble

2:18 am on Oct 11, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I believe Mr. Marx meant document.getElementsByName(). Perhaps it was a hard day in the Brave New World.

rgjb

2:36 am on Oct 11, 2004 (gmt 0)

10+ Year Member



Rambo,
Thanks for that. I had just figured it out. Unfortuneatly it still doesn't do what I'm afer as it disables the boxes when they've been checked and I can't get them back again.

I've also tried changing the form to use radio buttons but have ended up with a situation where the user can not only select multiple radio buttons but then can't turn them off I.e delesect them!

So I guess it's back to check boxes.
Any ideas?
Thanks
Gregg

Rambo Tribble

3:02 am on Oct 11, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



To allow only one radio button to be checked within a group, it is necessary to give each button the same name. You should note that the radio buttons will be returned as an array to JavaScript and must be processed accordingly. Here's a potential approach using radio buttons:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function clearRads(radsNam){
var rads=document.getElementsByName(radsNam);
var rads_ln=rads.length;
for(var i=0;i<rads_ln;i++){
rads[i].checked=false;
}
}
</script>
</head>
<body>
<form action="">
<input type="radio" name="radOne" /><br />
<input type="radio" name="radOne" /><br />
<input type="radio" name="radOne" /><br />
<a href="#" onclick="clearRads('radOne')">Clear Radio Buttons</a>
</form>
</body>
</html>

And here's an alternative using checkboxes:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function ckSet(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[i].id!=ck.id)ck_arr[i].disabled=true;
}
}else{
for(var i=0;i<ca_ln;i++){
ck_arr[i].disabled=false;
}
}
}
</script>
</head>
<body>
<form action="">
<input type="checkbox" id="ck1" name="ckOne" onclick="ckSet(this)" /><br />
<input type="checkbox" id="ck2" name="ckOne" onclick="ckSet(this)" /><br />
<input type="checkbox" id="ck3" name="ckOne" onclick="ckSet(this)" /><br />
</form>
</body>
</html>