Clicking disabled select element doesn't trigg

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.

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>

Answer 2

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/

Answer 3

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

Answer 4

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>