Forum Moderators: open

Message Too Old, No Replies

Disabling radio buttons

A more efficient way than just listing them?

         

thesheep

3:43 pm on Aug 2, 2005 (gmt 0)

10+ Year Member



I'm wondering what is a more elegant solution to disabling whole groups of radio buttons. At the moment I just access them through document.form[0].radioGroupName[i], so to disable a whole bunch I have something like this:

document.forms[0].mounting_type[0].disabled = true;
document.forms[0].mounting_type[1].disabled = true;
document.forms[0].output_position[0].disabled = true;
document.forms[0].output_position[1].disabled = true;
document.forms[0].output_position[2].disabled = true;
document.forms[0].shaft_type[0].disabled = true;
document.forms[0].shaft_type[1].disabled = true;
document.forms[0].shaft_type[2].disabled = true;

I know that this is exactly the kind of basic repetitive stuff that good programming should eliminate. So how would I do this here? One problem is that I'm confused between a string and a variable name. Can I use a string to create a variable name dynamically?

var radioGroups = ("mounting_type","output_position","shaft_type");

document.forms[0].radioGroups[0][0].disabled = true;

I don't think I can substitute a string in the middle of an object reference like that, or can I? It would allow me to build a more elegant loop, something like this:

for(var i=0;i<radioGroups.length;i++) {
var thisRadioGroup = document.forms[0].radioGroups[i];
for(var j=0;j<thisRadioGroup.length;j++) {
thisRadioGroup[j].disable = true;
}
}

Needless to say this doesn't work but what is the problem in my logic?

garann

6:43 pm on Aug 2, 2005 (gmt 0)

10+ Year Member



Although you can't do exactly what you're doing above, you can still use your loop. Instead, you can do

var radioGroups = ("mounting_type","output_position","shaft_type");
for(var i=0;i<radioGroups.length;i++) {
[b]var thisRadioGroup = document.getElementsByName(radioGroups[i]);[/b]
for(var j=0;j<thisRadioGroup.length;j++) {
thisRadioGroup[j].disable = true;
}
}

getElementsByName takes a string and returns an array. It seems like just what's called for here.

thesheep

9:54 am on Aug 3, 2005 (gmt 0)

10+ Year Member



Yes I actually tried the getElementsByName route, but for some reason it doesn't seem to work. But from what you're saying it should work, so perhaps it's just a trivial error. If I paste your code in exactly (but change 'disable' to 'disabled') nothing is disabled, although strangely I get no error warnings.

I thought it might be some kind of browser support issue with getElementsByName(). Also, I'm firing this script with the onload event, and perhaps that causes some problem?

As an interesting aside, if you were trying to code it using the original document.forms[0].mounting_type[0].disabled method is there actually any way to read a string into a variable name in Javascript? (I accept that your getElementsByName method is better for the job, if I could get it to work, I'm just curious).

birdbrain

10:40 am on Aug 3, 2005 (gmt 0)



Hi there thesheep,

you may find this method of interest...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>radio disable</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<script type="text/javascript">
<!--
function shutOff() {
var radio=document.getElementsByTagName('input');
for(c=0;c<radio.length;c++) {
if(radio[c].name=="mounting_type"¦¦radio[c].name=="output_position"¦¦radio[c].name=="shaft_type") {
radio[c].disabled=true;
}
}
}
onload=shutOff;
//-->
</script>
</head>
<body>
<form action="#">
<div>
<input type="radio" name="mounting_type"/>
<input type="radio" name="output_position"/>
<input type="radio" name="shaft_type"/>
<input type="radio" name="foo"/>
<input type="radio" name="mounting_type"/>
<input type="radio" name="output_position"/>
<input type="radio" name="shaft_type"/>
<input type="radio" name="foo"/>
</div>
</form>
</body>
</html>


Note:- In the if statement that the ¦¦ lines should be solid. For some reason this forum has a desire to make the presentation
of code very difficult. If I did not know better I would describe it as perverse. ;)

birdbrain

thesheep

1:08 pm on Aug 3, 2005 (gmt 0)

10+ Year Member



Yes or I guess I could give each of the radio buttons to be affected a specific class name and simplify it a bit more. But I don't think I can turn off a whole group of radio buttons in the way you say, don't I have to iterate through each radio button in the group?

radio[c][i].disabled = true;

instead of

radio[c].disabled = true;

?

By the way, I think you can check 'disable [codes]' in your post if you want to include extra characters? Does that help? ¦¦¦¦¦

garann

5:19 pm on Aug 3, 2005 (gmt 0)

10+ Year Member



As an interesting aside, if you were trying to code it using the original document.forms[0].mounting_type[0].disabled method is there actually any way to read a string into a variable name in Javascript?

You can use the eval method to make your Strings recognized as objects on the page. However, getElementsByName is much neater and I'm sure you can get it working with a little debugging. Whichever you choose, good luck. :)