Кнопка IE внутри ярлыка с флажком

Question

У меня есть такой код:

<li>
    <input type="checkbox" id="f6c9677c-309c-446c-9f78-757467ec7adc">
    <label for="f6c9677c-309c-446c-9f78-757467ec7adc">
        <span> Testigos de la Valoracion </span>
        <button disabled>Button</button>
    </label>
</li>

Проблема в том, что кнопка отключена, и в IE (v11, последний), когда я нажимаю на нее, флажок активируется. Я не могу изменить структуру.

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

Во всех других браузерах работает нормально: нажатие на отключенную кнопку ничего не делает.

Answer 1

Поскольку вы не можете изменить структуру, вы можете использовать JavaScript для предотвращения поведения кнопок.Даже инвалиды.Или - к счастью - используйте CSS, чтобы обойти это: pointer-events

label button[disabled] {
  pointer-events: none;
}

Это делает работу за вас?

Примечание : работает только для IE11 или выше.

Answer 2

Одним из возможных обходных путей может быть предотвращение события по умолчанию, если целью является кнопка:

document.querySelector('label').addEventListener('click', function(e){
  if(e.target.nodeName == 'BUTTON')
    e.preventDefault();
});

<li>
  <input type="checkbox" id="f6c9677c-309c-446c-9f78-757467ec7adc">
  <label for="f6c9677c-309c-446c-9f78-757467ec7adc">
    <span> Testigos de la Valoracion </span>
    <button disabled>Button</button>
  </label>
</li>

Answer 3

<li>
    <input type="checkbox" id="f6c9677c-309c-446c-9f78-757467ec7adc">
    <label for="f6c9677c-309c-446c-9f78-757467ec7adc">
        <span> Testigos de la Valoracion </span>


    </label>
     <button disabled="disabled">Button</button>
</li>