如何防止单击复选框的标签范围。仅可在复选框上单击答案

【问题标题】：How to prevent clicking on a checkbox's label span. clickable only on checkbox only如何防止单击复选框的标签范围。仅可在复选框上单击
【发布时间】：2016-11-03 18:28:58
【问题描述】：

我有一个 jsp 形式的复选框，其中包含标签，其中包含在检查元素后显示的跨度。我希望复选框仅在我单击复选框时才可点击。如果我点击复选框标签跨度，它不应该是可点击的。我不允许修改这个标签，因为它在类中有依赖关系，我也不能为它修改 css，因为它在每个页面上都会中断。如果可以使用 jquery 完成解决方案，那么非常受欢迎。先感谢您。

JSP 代码

<div class="fbox3 nspan">
<form:checkbox path="sendWelcomeEmail"  cssClass="label-revert" checked="true"label="Send a welcome email with login details to the user.  /></div>

【问题讨论】：

标签： javascript jquery checkbox

【解决方案1】：

试试这个，

$("span").css("pointer-events", "none");

另类，

<span onclick='return false;'>some text here</span>

【讨论】：

谢谢，但我已经添加，因为它在
span 仅在开发工具中可见，因此不能使用第二个选项。

【解决方案2】：

用html替换jsp标签

  <form:form method="POST" commandName="user" action="" id="user-profile-form">

        <div class="fbox3 nspan " id="sendWelcomeEmail">
                                    <input id="sendWelcomeEmail1" name="sendWelcomeEmail" class="label-revert " checked="true" type="checkbox" value="true">
                                    <label for="sendWelcomeEmail1" style="display:inline-block !important;padding-right: 0 !important; "></label>
                                    <span style="display:inline-block; font-family: latolight, helvetica, arial, sans-serif ; font-weight: 300; color: #969696 !important; font-size: 16px;">Send a welcome email with login details to the user.</span>
                                </div>

和css

#user-profile-form label > span {
margin-right: 12px !important;

}

【讨论】：