Clicking disabled select element doesn't trigger click or mousedown events on it's parent

Question

Disabled elements such as <select> and <input> doesn't react to click event , I'm trying to wrap them in a <div> and listen to it's click event.

Clicking a disabled <input> triggers the click on it's container <div>, but I am having problem with <select> elements. clicking a disabled <select> element doesn't trigger it's container <div>'s click, as you can see in this JSFiddle Example.

html:

<button onclick="buttonClick()" >Click</button>
<div id="test"></div>

js:

buttonClick = function (){
    var editor = $("#test");

    var div=$("<div>")
      .mousedown(function () {
          alert("!!!");
        })
      .appendTo(editor);

     var selecttest = $("<select>")
      .attr("disabled", "disabled")
      .appendTo(div);
     $("<option />").attr("value", '').appendTo(selecttest);
};

If I add an <input> using the following code instead of <select>, it works:

 var textinput = $("<input>")
      .attr("type", "text")
      .attr("disabled", "disabled")
      .appendTo(div);

Tests for different browsers: For IE11: for both input and select it works.

For Firefox: for both input and select it doesn't work.

For Opera and Chrome: forinput it works, for select it doesn't work.

Ascocarp

This "question" actually misses the most important part: the question. Without that it's hard to impossible to decide what a correct answer should contain. – Scrivener

Answer 1

The mousedown event doesn't fire on disabled input or select elements, or any mouse event on disabled elements. Here is your example and it adds both the input and select element, try clicking on them, it will not fire an alert. I have made the div with background color red so you can see where it is, so if you click only on the red part it will fire.

So your statement that the mousedown event is fired on disabled input field, but not on disabled select is false :)

var buttonClick = function() {
  var editor = $("#test");

  var div = $("<div>")
    .mousedown(function() {
      alert("!!!");
    })
    .appendTo(editor);

  var textinput = $("<input>")
    .attr("type", "text")
    .attr("disabled", "disabled")
    .appendTo(div);

  var selecttest = $("<select>")
    .attr("disabled", "disabled")
    .appendTo(div);
  $("<option />").attr("value", '').appendTo(selecttest);

};

select {
  width: 200px;
}
button {
  width: 70px;
  height: 21px;
}
#test div {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>


<button onclick="buttonClick()">Click</button>
<div id="test"></div>

Aspiration

For IE11: for both input and select it works. For Firefox: for both input and select it doesn't work. For Opera and Chrome: forinput it works, for select it doesn't work. – Ascocarp

So you want the mousedown event to fire on the parent when you click on either input or select field? If that is your question than you can add pointer-events: none to the disable input and select and then wherever you click on the parent div it will fire the event attached to it :) – Aspiration

I am reading about pointer-events, I will try use it, thank you:) – Ascocarp

Glad that I could help :) – Aspiration

@BojanPetkovski thank you but could you please elaborate on what your solution is why it solves the problem of not being able to trigger click events on disabled form elements? I read it a couple of times and asides from seeing the jsfiddle that there's an event triggered, I couldn't understand why it actually works. – Gnotobiotics

Unfortunately, the OP forgot to ask a real question - so the answer is hard to scope. For fixing the problem that the OP describes, using style="pointer-events: none;" on the disabled select or input element will allow a parent element, e.g. a div, to pick up the click event. See developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#Values and the value none there. – Scrivener

@BojanPetkovski Why does your example code set up the HTML for the test case using jQuery instead of using plain markup? What's the benefit? – Scrivener

Answer 2

Same problem here, I put a div above the select with a transparent backgroud. i know this not the perfect solution but i works for me.

var notAvailablePopup = function (){
   alert( "not available : work on select" );
}

.invisible_div {
  width: 68%; 
  height: 33px; 
  background: rgba(255,0,0,0); 
  margin-top: -33px;
  z-index:1;
  position:absolute
}

.language {
  z-index: 0;
}

<div onclick ="notAvailablePopup()" class="row language" >
  <select disabled="disabled" class="form-control select-elem"  >
    <option value="">Translate this video</option>                      </select>


  <div class="invisible_div">
   </div>
</div>

Harpist

My drop down was dependent on selection in another drop down. I moved the margin when the dependent should be enabled with: $('.invisible_div').css({ 'margin-top': '0' }); $('.invisible_div').css({ 'margin-top': '45px' }); and made it disabled for appearance. $('#GoalDefnId').prop('disabled', 'disabled'); – Magnifico

Answer 3

I'm a bit late at the battle,
Bojan Petkovski helped a lot but for direct answer : http://jsfiddle.net/jea1mtz6/

Just added in your CSS on the child element "select" : pointer-events: none;

The element is never the target of pointer events. But events may target its descendant elements.

Other answers don't work on all browsers (z-index) or "cheat" with a semi-hack (readonly). Tested on Chrome and firefox

Passerby

Answer 4

This is exaclty the expected behaviour of disabled, you probably want to disable the <options> ?

Vento

I want to disable select. – Ascocarp

So the user cant dropdown it? – Vento

Yes, user can't dropdown it;) – Ascocarp

For me this would cause a very bad user experience, a select with no function? I think you shold hide/replace it with a more clear solution – Vento

I have checkbox, if it is checked - combobox is enable, if checkbox is not checked - combobox is disabled. What I need: when user checks checkbox or clicks on combobox - combobox will be enable. – Ascocarp

So you ant to enable the combo-state-checkbox also on combobox click? Than you can not disable the combobox. Just add an onclick listener which prevents the default event in your case – Vento

Answer 5

Disabled elements do not listen to click events, this is the behavior of disabled elements. Elements with readonly property listen to click events.

Also, your code has an error.

I corrected the error in your code. The scenario mentioned in your question will not respond to click event since select is disabled. If you change disbaled to readonly then it will work.

buttonClick = function (){
    var editor = $("#test");

    var div=$("<div>")
      .mousedown(function () {
          alert("!!!");
        })
      .appendTo(editor);

     var selecttest = $("<select>")
      .attr("readonly", "true")
      .appendTo(div);
     $("<option />").attr("value", '').appendTo(selecttest);
};

See this fiddle - http://jsfiddle.net/Ashish_developer/5d4qewps/1/

Abercrombie

Actually, the question is why it works with disabled <input> but not with disabled <select> – Rive