Using one radio-button to de-activate the rest.

Hi everyone,

Although i can float and doggy-paddle with JS, i am not able to go that deep so your assistance would be most appreciated.

I have a form with 7 groups of radio buttons and each group has 4 options. When any of group 7 is selected, i would like all the other groups to be disabled, but how do i go about it???

This is a simplified version of the form:

<form action="#" method="post">
<input name="a" value="i" type="radio">
<input name="a" value="m" type="radio">
<input name="a" value="n" type="radio">
<input name="a" value="w" type="radio">
<input name="b" value="n" type="radio">
<input name="b" value="i" type="radio">
<input name="b" value="m" type="radio">
<input name="b" value="w" type="radio">
<input name="c" value="n" type="radio">
<input name="c" value="i" type="radio">
<input name="c" value="m" type="radio">
<input name="c" value="w" type="radio">
<input name="d" value="n" type="radio">
<input name="d" value="i" type="radio">
<input name="d" value="m" type="radio">
<input name="d" value="w" type="radio">
<input name="e" value="n" type="radio">
<input name="e" value="i" type="radio">
<input name="e" value="m" type="radio">
<input name="e" value="w" type="radio">
<input name="f" value="n" type="radio">
<input name="f" value="i" type="radio">
<input name="f" value="m" type="radio">
<input name="f" value="w" type="radio">
<input name="all" value="n" type="radio">
<input name="all" value="i" type="radio">
<input name="all" value="m" type="radio">
<input name="all" value="w" type="radio">
</form>

HTML:

So, when any of the 'all' options are selected, all of the other radio buttons should be disabled.

Thanks for your help all.

 

I'm not 100% sure I know what you mean by "disable"... I assume you mean "uncheck" and not grey out the control completely. Here's a quick and dirty function that does the trick:

function uncheckRadioGrp() {
	var args = uncheckRadioGrp.arguments;
	var frm = args[0];
	for ( var i=1; i<args.length; i++ ) 
		for( var j=0; j<eval("frm." + args[i] + ".length"); j++ ) 
			eval("frm." + args[i] + "[j].checked = false" );
}

Code (markup):

So, in your HTML, simply create each radio button like this:

<form name="frm" action="#" method="post">
    <input name="a" value="i" type="radio" onclick="uncheckRadioGrp(document.frm, 'b', 'c', 'd', 'e', 'f', 'all');">
...

Code (markup):

Pass the form object followed by all the group names you'd like disabled as arguments.

Hope that helps.

Dex

 

Dirty indeed! Thank you very much, your function provided the crux for what i really needed.

Thanks again.

 

Unnecessary use of eval is discouraged.

function uncheckRadioGroups()
{
 var args = arguments;
 var frm = args[0];
 
 for( var i=1; i < args.length; i++ )
  for( var j=0; j < frm.elements[args[i]].length; j++ ) 
   frm.elements[args[i]][j].checked = false;
}

Code (markup):

If I understand the requirement, 'all' should not be included but 'a' should.

In any case, ISTM that the functionality is defeated unless all the other groups are given a reciprocal handler to uncheck the 'all' group.

--

 

Thanks for the elements associative array tip... didn't know that existed. Definitely much better than eval for performance and readability

Dex