остановить ярлык из переключателя ввода

У меня есть следующий html-код. При щелчке по метке он переключает флажок.

<td><label for="startClientFromWebEnabled">Client Launch From Web:</label></td>
<td><input type="checkbox" id="startClientFromWebEnabled" name="startClientFromWebEnabled" data-bind="checked: StartClientFromWebEnabled, enable: IsEditable" onchange="startClientFromWebToggleRequiredAttribute()" /></td>

Как я могу это предотвратить? Если я удалю for="startClientFromWebEnabled", он перестает переключаться, но мне нужно это, потому что у меня есть некоторая логика, которая принимает идентификатор из элемента, который запускает событие...

Ответ 1

Лучшим решением было бы позволить ярлыку переключать флажок, поскольку это интуитивное и ожидаемое поведение.

Второе лучшее решение, чтобы убедиться, что ваш флажок не вложенными этикетки и этикетки не имеет for атрибута. Если у вас есть какая-то логика, которая зависит от нее, вы можете поместить атрибуты данных в элементы и использовать их в своей логике.

<input type="checkbox" data-myid="1" />
<label data-myid="1">foo</label>

Ответ 2

Существует также решение CSS:

label {
   pointer-events: none;
   cursor: default;
}

Ответ 3

если вы используете JQuery, добавьте id на свой ярлык, а затем добавьте его в свой скрипт:

$("#lbl").click(function(){
   return false; 
});

Ответ 4

"У меня есть некоторая логика, которая берет идентификатор из элемента"

Вы можете удалить его for -attribute, если вы храните идентификатор где-то еще. Например, в data-* -attribute:

<label data-input-id="startClientFromWebEnabled">

С другой стороны, иногда бывает трудно указать и щелкнуть флажок, основанный на стиле и возможностях пользователя. Есть веские причины для использования for -attribute.

Ответ 5

Просто запретите использование метки по умолчанию или любой ее части, если это необходимо.

document.querySelector('.prevent-default').addEventListener('click', (e)=>{
   e.preventDefault();
}, false);

    <input type="checkbox" id="1" />
    <label class="prevent-default" for="1">foo</label>