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

Discussion in 'Javascript' started by kebabkongen@hotmail.com, Jun 19, 2006.

  1. Guest

    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
    , Jun 19, 2006
    #1
    1. Advertising

  2. RobG Guest

    wrote:
    > 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.

    > <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>



    --
    Rob
    RobG, Jun 20, 2006
    #2
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.

Share This Page