Geek Answers Handbook

Clicking on a disabled selection does not trigger a click or mousedown event on it.

Disabled elements, such as <select>and <input>, do not respond to the click event, I try to wrap them in <div>and listen to its click event.

By clicking on the disabled <input>, a click on it starts in the container <div>, but I have a problem with the elements <select>. pressing a disabled item <select>does not call its container <div>, 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 <input>using the following code instead <select>, it will work:

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

Tests for different browsers: For IE11: for inputand selectit works.

For Firefox: for inputand selectit does not work.

Opera Chrome: input , select .

+4
4

mousedown . , , , . div , , , , , .

, , mousedown , , 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>
Hide result
+1

, div backgroud. , , .

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>
Hide result
+1

, , , <options>?

0

, . readonly .

, .

. , , click, select . disbaled readonly, .

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);
};

- http://jsfiddle.net/Ashish_developer/5d4qewps/1/

-1
source

More articles:


All Articles