ASP.NET Checkbox 不会检查 jQuery

Question

我正在尝试使 GridView 中的复选框更易于用户检查。我添加了一些 jQuery 以使 <td> 元素可点击并选中复选框。那部分有效。问题是，当用户单击实际的复选框时，它不会检查。当我调试我的代码时，似乎 .is(":checked") 没有正确返回。任何帮助将不胜感激。

我的 GridView 项目模板

  <asp:TemplateField HeaderText="Select" ItemStyle-Width ="5%"
         ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="chk" >
     <ItemTemplate>
       <asp:CheckBox id="chkBxPSelect" runat="server" />
     </ItemTemplate>
  </asp:TemplateField>

我还尝试将复选框包装在标签和锚标签中，但无济于事。

<asp:TemplateField HeaderText="Select" ItemStyle-Width ="5%"  ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="chk" >
    <ItemTemplate> 
        <label style="display:block;">
           <asp:CheckBox ID="chkBxPSelect" runat="server" /> 
        </label>                                                                                                                                             
    </ItemTemplate>

我的 jQuery

$(".chk").click(function (e)
{
    var checkBox = $(this).find("input:checkbox:first");

    if (checkBox.is(":checked"))
    {
        checkBox.prop("checked", false);
    }
    else
    {
        checkBox.prop("checked", true);
    }
});

有什么想法吗？

编辑 我也尝试在复选框本身添加一个点击。似乎总是使用 `.is(":checked") 检查复选框是否被选中并不会报告复选框的正确状态。

$('input[id$="chkBxPSelect"]').click(function ()
{
   if ($(this).is(":checked"))
   {
      $(this).prop("checked", false);
   }
   else
   {
    $(this).prop("checked", true);
   }

});

与 我也试过这个，形成下面的建议。

$('input[id$="chkBxPSelect"]').click(function ()
{
  e.preventDefault();
    //e.stopPropagation();

});

单击实际复选框时，该复选框仍然不会检查。

Answer 1

这可能有效：

$(".chk").click(function (e)
{
    var checkBox = $(this).find("input:checkbox:first");
    if (checkBox.is(":checked"))
    {
        checkBox.prop("checked", false);
    }
    else
    {
        checkBox.prop("checked", true);
    }
});

$(".chk input[type=checkbox]:first").click(function (e)
{
    e.preventDefault();
    e.stopPropagation();
});

我不确定您是否需要preventDefault 或stopPropagation，但我相信stopPropagation 可以防止复选框click 冒泡到其父级td。

另一个可能的解决方案是这个。如果它有效，我会推荐它，因为它不需要任何脚本：

<asp:TemplateField HeaderText="Select" ItemStyle-Width ="5%"
        ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="chk" >
    <ItemTemplate>
        <label style="display:block;">
            <asp:CheckBox id="chkBxPSelect" runat="server" />
        </label>
    </ItemTemplate>
</asp:TemplateField>

当复选框包含在<label> 元素中时，单击该标签内的任何内容都会切换复选框的选中状态。通过给标签一个 display:block 样式，这应该让它占据它所在的表格单元格 (td) 的整个空间。因此，单击 td 中的任何位置都应该在 threory 中切换复选框。

Answer 2

更新：您可以通过这种方式完成任务：

<td class="Validate">
     <asp:Checkbox id="chkSelect" runat="server" class="chkSelect" ... />
</td>

通过添加 class 元素，它将为 jQuery 提供锚点。然后你可以这样做：

$('.Validate').click(function () {
     var item = $(this).find('.chkSelect');
     if(item.is(':checked') {
         item.prop('checked', false);
     } else {
         item.prop('checked', true);
     }
});

因此，当您单击td 时，jQuery 将执行，至于查找您的输入，您为其提供了一个反映您的 Id 的类标识符。因此，您使用find 来搜索td element 中的子元素。这应该会找到您的输入，然后您只需使用标识复选框的var 进行检查。

---

您实际上可以执行以下操作，这将确保您的控制权被抓住。

$('#<%= chkBxPSelect.ClientID %>').click(function () {
     if($(this).is(':checked')) {
         $(this).prop('checked', false);
     } else {
         $(this).prop('checked', true);
     }
});

如果$(this) 不起作用，请使用上述完整标识符，但 Microsoft 评估应该可以解决您的问题。您在 JavaScript 中的其他方法是：

$(this).find('input[type="checkbox"]:first');

我相信这也应该可以解决问题。您可能想对其进行测试，但我会在 Web-Forms 中使用第一种方法。

Answer 3

我在@danludwig 的帮助下解决了这个问题。 我需要向复选框本身和 e.stopPropagation() 添加一个单击处理程序，以防止事件冒泡到 td。我还必须将复选框包装在标签标签中，并在复选框中添加一个 CssClass 以使其更容易选择。

我的新复选框。

<asp:TemplateField HeaderText="Select" ItemStyle-Width ="5%"
        ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="chk">
    <ItemTemplate>
        <label style="display:block;">
            <asp:CheckBox ID="chkBxPSelect" runat="server" CssClass="chkBox" />
        </label>
    </ItemTemplate>
</asp:TemplateField>

我的新 jQuery 方法：

$(".chk").click(function (e)
{

    var checkBox = $(this).children("input:checkbox:first");


    if (checkBox.is(":checked"))
    {
        checkBox.prop("checked", false);
    }
    else
    {
        checkBox.prop("checked", true);
    }    

});



$(".chkBox").click(function (e)
{
    e.stopPropagation();

    if ($(this).is(":checked"))
    {
        $(this).prop("checked", false);
    }
    else
    {
        $(this).prop("checked", true);
    }

});

Answer 4

我只是在风格上使用了 z-index 并为我工作：

<input type="checkbox" class="custom-control-input" id="txtNews" runat="server" style="z-index:9999;">