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.

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. — Oliver, Jul 12 '18 at 10:32

Zakaria.dem · Answer 1 · 2017-11-08T14:01:48.623

5

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>

edited Nov 08 '17 at 14:01

answered Nov 08 '17 at 13:50

Zakaria.dem

293
5
10

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'); – Stephen Himes Feb 26 '19 at 20:23

score 1 · Accepted Answer · answered Oct 22 '14 at 09:28

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>

answered Oct 22 '14 at 09:28

Bojan Petkovski

6,835
1
25
34

For IE11: for both `input` and `select` it works. For Firefox: for both `input` and `select` it doesn't work. For Opera and Chrome: for`input` it works, for `select` it doesn't work. – user2889383 Oct 22 '14 at 09:41
4

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 :) – Bojan Petkovski Oct 22 '14 at 09:50
I am reading about pointer-events, I will try use it, thank you:) – user2889383 Oct 22 '14 at 09:57
Glad that I could help :) – Bojan Petkovski Oct 22 '14 at 10:06
1

@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. – George Katsanos Aug 10 '15 at 11:47
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 https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#Values and the value `none` there. – Oliver Jul 12 '18 at 10:36
@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? – Oliver Jul 12 '18 at 10:38

score 0 · Answer 3 · answered Oct 22 '14 at 09:25

0

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

answered Oct 22 '14 at 09:25

Psi

474
4
14

I want to disable `select`. – user2889383 Oct 22 '14 at 09:29
So the user cant dropdown it? – Psi Oct 22 '14 at 09:31
1

Yes, user can't dropdown it;) – user2889383 Oct 22 '14 at 09:32
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 – Psi Oct 22 '14 at 09:41
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. – user2889383 Oct 22 '14 at 09:52
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 – Psi Oct 22 '14 at 13:34

score 0 · Answer 4 · answered Sep 04 '21 at 19:24

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

Ashish · Answer 5 · 2014-10-22T09:09:55.733

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/

Actually, the question is why it works with disabled `` but not with disabled ` — T J, Oct 22 '14 at 09:04

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

5 Answers5

Linked