Search code examples
javascriptjqueryhtmlhtml-selecteventtrigger

Can I trigger events on select tags while them have the disabled attribute?

I disabled all the selects in the page with the id that ends with _test (and here all is fine), what I'd like to do is to show a title while the selects are disabled and the mouse is over them.

My problem is that it seems the disabled attribute blocks every event from being executed (I also tried with click instead of mouseover, but the result has not changed). In fact, I tried to comment hide_children_option(); and the function worked.

So the main question is: can I disable the selects, but in the same time trigger events (or at least make what I thought real)?

Below the code-snippet:

    function hide_children_option() {
      $("[id$=_test]").attr("disabled", "disabled");
    }

    $(document).ready(function() {
      hide_children_option();

      $("[id$=_test]").mouseover(function() {
      	console.log("Hey you!");
        
        var attr = $(this).attr("disabled");
        if (typeof attr !== typeof undefined && attr !== false) {
          console.log("This is disabled");
        }
      });
    });
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
	Official 1
    <select id="obj1_official">
      <option value="0">0</option>
      <option value="1">1</option>
    </select>
    <br>
    Test 1
    <select id="obj1_test">
      <option value="0">0</option>
      <option value="1">1</option>
    </select>
    <br>
    Official 2
    <select id="obj2_official">
      <option value="0">0</option>
      <option value="1">1</option>
    </select>
    <br>
    Test 2
    <select id="obj2_test">
      <option value="0">0</option>
      <option value="1">1</option>
    </select>
    <br>

Solution

  • It's not possible to add a mouse event to a disabled input. However there are 2 solutions I can think of you could use.

    1. The most simple one is adding a title="" attribute on the select and this shows a tooltip
    2. If you want your own logic you could create a wrapper around the select and attach events to this wrapper. (take in mind that you need to adjust the styling of this parent to make it appear inline and you need to disable the pointer-events of the disabled select)

    Examples:

        function hide_children_option() {
      $("[id$=_test]").attr("disabled", "disabled");
    }

    $(document).ready(function() {
      hide_children_option();

      $(".test-wrapper").mouseover(function() {
      	console.log('hey!');
      });
    });
    <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
	Official 1
    <select id="obj1_official">
      <option value="0">0</option>
      <option value="1">1</option>
    </select>
    <br>
    Test 1
    <select id="obj1_test" title="Some text you want to show">
      <option value="0">0</option>
      <option value="1">1</option>
    </select>
    <br>
    Official 2
    <select id="obj2_official">
      <option value="0">0</option>
      <option value="1">1</option>
    </select>
    <br>
    Test 2
    <div class="test-wrapper" style="display:inline;">
      <select id="obj2_test" style="pointer-events:none;">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </div>
    <br>