Могу ли я запускать события в тегах выбора, пока они имеют атрибут disabled? - PullRequest
Новая
       19

Могу ли я запускать события в тегах выбора, пока они имеют атрибут disabled?

0 голосов
/ 27 февраля 2020

Я отключил все выборки на странице с id, который заканчивается _test (и здесь все в порядке), что я хотел бы сделать, это показать 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>

1 Ответ

2 голосов
/ 27 февраля 2020

Невозможно добавить событие мыши к отключенному входу. Однако есть два решения, о которых я могу подумать, что вы могли бы использовать.

  1. Самое простое - добавить атрибут title="" в выборку, и это показывает всплывающую подсказку
  2. Если вы хотите свой собственный лог c вы можете создать оболочку вокруг 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>
...