CODEWITHSUNDEEP
javascripteventsdrop-down-menu
Christian
Christian

Reputation: 28125

Javascript receive onmousedown of a disabled select tag

I have a form with two radiobuttons:

[radio1]   [radio2] [select]

<input type="radio" id="radio1" name="radio" checked/>
<br/>
<input type="radio" id="radio2" name="radio"/>
<select id="select" onmousedown="test()" disabled="disabled">
    <option>aaa</option>
    <option>bbb</option>
</select>

The desired behaviour is that when radio1 is ticked, the selectbox is disabled. When radio2 is ticked, the user is able to select something from the selectbox (hence enabled).

I have the necessary event code in radio1 and radio2 to handle enabled/disabling the selectbox, and it works nicely.

However, I wanted an additional behaviour: I click the selectbox, radio2 should be ticked and the selectbox enabled:

function test(){
    document.getElementById('radio1').checked=false;
    document.getElementById('radio2').checked=true;
    document.getElementById('select').disabled=false;
}

However, test() never gets called while the selectbox is disabled. Is there some other event to do this?

The alternative solution is to put a transparent overlay over the selectbox to handle events (and hide it when the selectbox is enabled).

Upvotes: 1

Views: 437

Answers (1)

Atanas Korchev
Atanas Korchev

Reputation: 30671

I think this is expected. Disabled input elements do not respond to mouse (and other) events. You can try with the overlay solution - it should work even if the select is disabled.

Upvotes: 1

Related Questions