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>

最后的手段

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

$('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

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

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

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

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

Answer 5

仅在需要时防止标签或标签任何部分出现默认值。

application = service.Application("subscriber")
    srv = internet.TCPClient("127.0.0.1", 6379, myFactory())
    srv.setServiceParent(application)

connecting = ClientCreator(reactor, myProtocol).connectTCP("127.0.0.1", 6379)
    def connected(listener):
        listener.subscribe("newChannelName")
    connecting.addCallback(connected)

或

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

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

停止标签切换输入复选框

5 个答案: