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.

Answer 1

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>