javascript 停止标签切换输入复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12912236/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
stop label from toggling the input checkbox
提问by Mdb
I have the following html code. When clicking on the label it toggles the checkbox.
我有以下 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>
How can I prevent this? If I remove the for="startClientFromWebEnabled", It stops toggling but I need this because I have some logic that takes the id from the element that fires the event ...
我怎样才能防止这种情况？如果我删除for="startClientFromWebEnabled"，它会停止切换，但我需要这个，因为我有一些逻辑可以从触发事件的元素中获取 id ...
回答by BenM
The best solutionwould be to let label toggle the checkbox as that is intuitive and expected behaviour.
最好的解决方案是让标签切换复选框，因为这是直观和预期的行为。
Second bestsolution is to make sure your checkbox is not nested inside label and label does not have forattribute. If you have some logic that depends on it, you can put data attributes on elements and use those in your logic.
第二个最佳解决方案是确保您的复选框未嵌套在标签内并且标签没有for属性。如果您有一些依赖于它的逻辑，您可以将数据属性放在元素上并在您的逻辑中使用这些属性。
<input type="checkbox" data-myid="1" />
<label data-myid="1">foo</label>Last resort
最后一招
You could prevent the default behaviour of the clickevent using jQuery:
您可以click使用 jQuery阻止事件的默认行为：
$('label[for="startClientFromWebEnabled"]').click(function(e) {
e.preventDefault();
});?
Please see this jsFiddlefor an example.
请参阅此jsFiddle的示例。
回答by T.Todua
There is CSS solution too:
也有 CSS 解决方案：
label {
pointer-events: none;
cursor: default;
}
回答by Nikko Reyes
if you are using JQuery, add an idon your label then
add this in your script:
如果您使用的是 JQuery，请id在标签上添加一个，然后在脚本中添加：
$("#lbl").click(function(){
return false;
});
回答by feeela
"I have some logic that takes the id from the element "
“我有一些逻辑可以从元素中获取 id”
You could remove the for-attribute, if you store the ID somewhere else. For example in a data-*-attribute:
for如果您将 ID 存储在其他地方，您可以删除 -属性。例如在 -data-*属性中：
<label data-input-id="startClientFromWebEnabled">
On the other hand, it is sometimes difficult to point and click an a check-box based on the styling and the capabilities of the user. There is are good reasons for using the for-attribute.
另一方面，有时很难根据用户的样式和能力来指向和单击复选框。使用 -for属性是有充分理由的。
回答by Shishir Arora
Just prevent default on label or any part of label, if desired.
如果需要，只需防止标签或标签的任何部分出现默认值。
document.querySelector('.prevent-default').addEventListener('click', (e)=>{
e.preventDefault();
}, false); <input type="checkbox" id="1" />
<label class="prevent-default" for="1">foo</label>or
或者
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>