我可以在 select 标签上触发事件，而它们具有 disabled 属性吗？

Question

我禁用了以 _test 结尾的 id 页面中的所有选择（这里一切正常），我想做的是在选择被禁用且鼠标悬停在它们上面时显示 title。

我的问题是 disabled 属性似乎阻止了每个事件的执行（我也尝试使用 click 而不是 mouseover，但结果没有改变）。事实上，我试着评论 hide_children_option(); 并且功能有效。

所以主要问题是：我可以禁用选择，但同时触发事件（或者至少让我认为真实）吗？

代码片段下方：

    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>

Answer 1

无法将鼠标事件添加到禁用的输入。但是，我可以想到您可以使用 2 种解决方案。

最简单的方法是在 select 上添加一个 title="" 属性，这会显示一个工具提示
如果您想要自己的逻辑，您可以围绕 select 创建一个包装器并将事件附加到该包装器。（请记住，您需要调整此父项的样式以使其显示为内联，并且您需要禁用已禁用 select 的指针事件）

示例：

    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>

我可以在 select 标签上触发事件，而它们具有 disabled 属性吗？

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

javascript

jquery

html

html-select

eventtrigger