javascript - 停止标签切换输入复选框

Question

我有以下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"，它会停止切换，但我需要这个，因为我有一些逻辑可以从触发事件的元素中获取 id ...

Answer 1

最好的解决方案是让标签切换复选框，因为这是直观和预期的行为。

第二个最佳解决方案是确保您的复选框没有嵌套在标签内并且标签没有for属性。如果您有一些依赖于它的逻辑，您可以将数据属性放在元素上并在您的逻辑中使用它们。

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

最后一招

click您可以使用 jQuery阻止事件的默认行为：

$('label[for="startClientFromWebEnabled"]').click(function(e) { 
    e.preventDefault();
});​

请参阅此jsFiddle以获取示例。

Answer 2

也有 CSS 解决方案：

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

Answer 3

如果您使用的是 JQuery，id请在标签上添加一个，然后将其添加到您的脚本中：

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

Answer 4

如果需要，只需防止标签或标签任何部分的默认设置。

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

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

或者

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

    <input type="checkbox" id="1" />
    <label for="1">foo some part <span class="prevent-default">not</span> clickable</label>

Answer 5

“我有一些从元素中获取 id 的逻辑”

for如果您将 ID 存储在其他位置，则可以删除- 属性。例如在data-*-attribute 中：

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

另一方面，有时很难根据用户的样式和能力来指向并单击复选框。使用 - 属性有充分的理由for。