Disabling a select form element does not appear right in Internet Explorer

[kebabkongen]

Hi,
I'm working on a JavaScript that is enabling / disabling a select
element according to whether a checkbox is selected or not.
This works fine in Firefox, but in Internet Explorer (v 6.0.2900) it
appears wierd:
When I disable the selevt element in IE, it continues to appear as
enabled (falsely) until I try changing it.

When I click on it, updates itself as grey as to indicate that it is
disabled.
This is wrong. I want it to appear as grey and disabled the moment it
is disabled via JS.
Is this a bug in IE, or should I do this different way (code below).

Is there perhaps some way to "update" the select element so that it
appears as disabled once I disable it with JS? (without having to click
on it to probe if it is disabled or not)

Here is the essential part of my code:

....
function disable(bool) {
document.getElementById('mySelect).disabled = bool;
}
....
<input type="radio" name="y_n" onchange="javascript:disable(true)">
Disable
<br>
<input type="radio" name="y_n" onchange="javascript:disable(false)">
Enable
<br>
<select name="mySelect" id="mySelect">
<option value="test1">name 1</option>
<option value="test2">name 2</option>
<option value="test3">name 3</option>
<option value="test4">name 4</option>
</select>

Regards,
Per Magnus

 

[RobG]

Hi,
I'm working on a JavaScript that is enabling / disabling a select
element according to whether a checkbox is selected or not.
This works fine in Firefox, but in Internet Explorer (v 6.0.2900) it
appears wierd:

Do not use onchange with a radio button, use onclick. IE doesn't fire
the event until the element loses focus (as per the W3C spec but very
confusing), Firefox fires it as soon as you click on the element.

Incidentally, use a checkbox and you only need one control.

[...]

Here is the essential part of my code:

...
function disable(bool) {
document.getElementById('mySelect).disabled = bool;
}
...
<input type="radio" name="y_n" onchange="javascript:disable(true)">
Disable
<br>
<input type="radio" name="y_n" onchange="javascript:disable(false)">
Enable
<br>

You can ditch all the above and use:

<label for="cb01">Disable:<input type="checkbox" id="cb01"
onclick="
document.getElementById('mySelect').disabled=this.checked;
"></label>


to get consistent behaviour in IE and Gecko browsers.