Greying out menus based on selection!

[dreamcatcher]

Ok, I nearly have this how I want it, but not quite.

I have 3 radio buttons, next to each is a drop down menu. I want the drop down menus greyed out until the relevant radio button is selected. This I have managed ok, using the following:

<input type="radio" name="filter" value="date" onclick="javascript:enableDates()">
<select name="dates" disabled="true">
etc etc

The javascript code for the enableDates() function is as follows:

<script language="JavaScript" type="text/JavaScript">
function enableDates()
{
document.adminForm.dates.disabled=false;
}
</script>

So, this successfully greys out the drop down using disabled=true and then when radio button is checked, it displays it.

My question is this. How do I change the code so that when another radio button is selected, the drop down greys out again? At the moment, you have to refresh the page to grey it out, which obviously is no good.

Hopefully its something simple.

Thanks for the help. :)

[Birdman]

Here's one way to do it. You build an array of the select fields and then loop them. When the function is called, it sends the value of the clicked radio then compares that value to each item in the array.

function enableDates(field)
{
fields = new Array("dates", "times", "foo");
count = fields.length;

for(i=0; i<count; i++){
if(field == fields[i]) document.adminForm.dates.disabled = false;
else document.adminForm.dates.disabled = true;
}

}

<input type="radio" value="dates" onclick="enableDates(this.value)">
<select name="dates" disabled="true">

<input type="radio" value="times" onclick="enableDates(this.value)">
<select name="times" disabled="true">

<input type="radio" value="foo" onclick="enableDates(this.value)">
<select name="foo" disabled="true">

[klogger]

[edit]Misread the post[/edit]

[dreamcatcher]

Thanks Birdman, that was exactly what I was looking for. :)