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

K

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
 
R

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top