Question

我想知道为什么单击标签时执行复选框点击事件。任何帮助请点击标签时如何防止执行

//点击活动

//我试试这个

 $("input:checkbox[name*='chkFields']").click(function (evt) {
        if ($(evt.target).is("input")) {
            if ($(this).attr("checked") == "checked") {
}}});

//还有这个

$("input:checkbox[name*='chkFields']").click(function () {
        if ($(this).attr("checked") == "checked") {
         logic here....
}
});

// HTML

<div class="FloatLeft" id="draggableElements">

               <div style="width: auto!important; margin-bottom: 0px;" class="TableCellHeader metooltip ellipsis" id="ctl00_ContentPlaceHolderContent_sbMain_ctl01_sbGroups_ctl01_DraggableListID_repColumnCategory_ctl00_divHeader" title="
                   Employee 

               ">
                   Employee 
               </div>
               <div style="margin-bottom:5px">
                   <table class="checkbox" id="ctl00_ContentPlaceHolderContent_sbMain_ctl01_sbGroups_ctl01_DraggableListID_repColumnCategory_ctl00_chkFields">
                                                        <tbody>
                                                        <tr>
                                                            <td>
                                                                <span class="aspNetDisabled">
                                                                    <input type="checkbox" value="106" disabled="disabled" checked="checked" name="ctl00$ContentPlaceHolderContent$sbMain$ctl01$sbGroups$ctl01$DraggableListID$repColumnCategory$ctl00$chkFields$0" id="ctl00_ContentPlaceHolderContent_sbMain_ctl01_sbGroups_ctl01_DraggableListID_repColumnCategory_ctl00_chkFields_0" style="visibility: hidden;">
                                                                    <label for="ctl00_ContentPlaceHolderContent_sbMain_ctl01_sbGroups_ctl01_DraggableListID_repColumnCategory_ctl00_chkFields_0">Employee Name</label>
                                                                </span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <span>
                                                                    <input type="checkbox" value="20" checked="checked" name="ctl00$ContentPlaceHolderContent$sbMain$ctl01$sbGroups$ctl01$DraggableListID$repColumnCategory$ctl00$chkFields$1" id="ctl00_ContentPlaceHolderContent_sbMain_ctl01_sbGroups_ctl01_DraggableListID_repColumnCategory_ctl00_chkFields_1">
                                                                    <label for="ctl00_ContentPlaceHolderContent_sbMain_ctl01_sbGroups_ctl01_DraggableListID_repColumnCategory_ctl00_chkFields_1">Job</label>
                                                                </span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <span>
                                                                    <input type="checkbox" value="21" checked="checked" name="ctl00$ContentPlaceHolderContent$sbMain$ctl01$sbGroups$ctl01$DraggableListID$repColumnCategory$ctl00$chkFields$2" id="ctl00_ContentPlaceHolderContent_sbMain_ctl01_sbGroups_ctl01_DraggableListID_repColumnCategory_ctl00_chkFields_2">
                                                                    <label for="ctl00_ContentPlaceHolderContent_sbMain_ctl01_sbGroups_ctl01_DraggableListID_repColumnCategory_ctl00_chkFields_2">Age</label>
                                                                </span>
                                                            </td>
                                                        </tr>
                                                    </tbody></table>
               </div>

               <div style="width: auto!important; margin-bottom: 0px;" class="TableCellHeader metooltip ellipsis" id="ctl00_ContentPlaceHolderContent_sbMain_ctl01_sbGroups_ctl01_DraggableListID_repColumnCategory_ctl01_divHeader" title="
                   Sample text

               ">
                   Sample text
               </div>
               <div style="margin-bottom:5px">
                   <table class="checkbox" id="ctl00_ContentPlaceHolderContent_sbMain_ctl01_sbGroups_ctl01_DraggableListID_repColumnCategory_ctl01_chkFields">
                                                        <tbody><tr>
                                                            <td>
                                                                <input type="checkbox" value="89" name="ctl00$ContentPlaceHolderContent$sbMain$ctl01$sbGroups$ctl01$DraggableListID$repColumnCategory$ctl01$chkFields$0" id="ctl00_ContentPlaceHolderContent_sbMain_ctl01_sbGroups_ctl01_DraggableListID_repColumnCategory_ctl01_chkFields_0">
                                                                <label for="ctl00_ContentPlaceHolderContent_sbMain_ctl01_sbGroups_ctl01_DraggableListID_repColumnCategory_ctl01_chkFields_0">Amount</label>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <input type="checkbox" value="90" name="ctl00$ContentPlaceHolderContent$sbMain$ctl01$sbGroups$ctl01$DraggableListID$repColumnCategory$ctl01$chkFields$1" id="ctl00_ContentPlaceHolderContent_sbMain_ctl01_sbGroups_ctl01_DraggableListID_repColumnCategory_ctl01_chkFields_1">
                                                                <label for="ctl00_ContentPlaceHolderContent_sbMain_ctl01_sbGroups_ctl01_DraggableListID_repColumnCategory_ctl01_chkFields_1">Percent</label></td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <input type="checkbox" value="91" name="ctl00$ContentPlaceHolderContent$sbMain$ctl01$sbGroups$ctl01$DraggableListID$repColumnCategory$ctl01$chkFields$2" id="ctl00_ContentPlaceHolderContent_sbMain_ctl01_sbGroups_ctl01_DraggableListID_repColumnCategory_ctl01_chkFields_2">
                                                                <label for="ctl00_ContentPlaceHolderContent_sbMain_ctl01_sbGroups_ctl01_DraggableListID_repColumnCategory_ctl01_chkFields_2">Adjustment</label>
                                                            </td>
                                                        </tr>
                                                    </tbody></table>
               </div>



 </div>

Answer 1

不要这样做。

对于大多数没有灵巧点击一个非常小的方框的人来说，这是一种惯用的行为。虽然点击一个关联良好的描述性标签可以让它变得更加容易。

此外，我很确定它可以帮助视障人士屏幕阅读。

Answer 2

我尝试管理这个。这是代码片段

 $("label[for*='chkFields']").click(function(ev) { ev.preventDefault(); });

单击标签时也会执行复选框单击事件

2 个答案: