0

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

//点击事件

//我试试这个

 $("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>
4

2 回答 2

1

不要这样做。

对于大多数没有灵巧点击非常小的方形框的人来说，这是一种可解释的行为。虽然，单击关联良好且描述性好的标签会使其变得无限容易。

此外，我很确定它有助于视障人士的屏幕阅读器。

于 2013-02-16T12:59:01.760 回答
1

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

 $("label[for*='chkFields']").click(function(ev) { ev.preventDefault(); });
于 2013-02-16T13:13:50.747 回答