У меня есть следующий 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", он перестает переключаться, но мне нужно это, потому что у меня есть некоторая логика, которая принимает идентификатор из элемента, который запускает событие...
Лучшим решением было бы позволить ярлыку переключать флажок, поскольку это интуитивное и ожидаемое поведение.
Второе лучшее решение, чтобы убедиться, что ваш флажок не вложенными этикетки и этикетки не имеет for атрибута. Если у вас есть какая-то логика, которая зависит от нее, вы можете поместить атрибуты данных в элементы и использовать их в своей логике.
<input type="checkbox" data-myid="1" />
<label data-myid="1">foo</label>Существует также решение CSS:
label {
pointer-events: none;
cursor: default;
}
если вы используете JQuery, добавьте id на свой ярлык, а затем добавьте его в свой скрипт:
$("#lbl").click(function(){
return false;
});
"У меня есть некоторая логика, которая берет идентификатор из элемента"
Вы можете удалить его for -attribute, если вы храните идентификатор где-то еще. Например, в data-* -attribute:
<label data-input-id="startClientFromWebEnabled">
С другой стороны, иногда бывает трудно указать и щелкнуть флажок, основанный на стиле и возможностях пользователя. Есть веские причины для использования for -attribute.
Просто запретите использование метки по умолчанию или любой ее части, если это необходимо.
document.querySelector('.prevent-default').addEventListener('click', (e)=>{
e.preventDefault();
}, false); <input type="checkbox" id="1" />
<label class="prevent-default" for="1">foo</label>