单击目标复选框后，Checked="Checked" 不起作用[重复]

Posted 2023-03-05

【中文标题】单击目标复选框后，Checked="Checked" 不起作用[重复]

【英文标题】：Checked="Checked" not working after target Checkbox was clicked once [duplicate]

【发布时间】：2017-09-24 21:24:16

【问题描述】：

我有以下 GridView：

<asp:GridView ID="gvSpecificRights" runat="server" AutoGenerateColumns="false" OnRowCreated="gvSpecificRights_RowCreated" CssClass="mGrid" ShowHeaderWhenEmpty="true" ShowFooter="true">
    <Columns>
        <asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" />
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate><asp:Label ID="lblName" runat="server" Text='<%# Bind("Name") %>'></asp:Label></ItemTemplate>
            <FooterTemplate><asp:DropDownList ID="ddlAvailableUsers" runat="server"></asp:DropDownList></FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Create" ItemStyle-HorizontalAlign="Center" FooterStyle-HorizontalAlign="Center">
            <ItemTemplate><asp:CheckBox ID="cbTickCreator" runat="server" Checked='<%# Eval("TickCreator") %>' CssClass="clicknext"></asp:CheckBox></ItemTemplate>
            <FooterTemplate><asp:CheckBox ID="cbFooterTickCreator" runat="server" CssClass="clicknext"></asp:CheckBox></FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Read" ItemStyle-HorizontalAlign="Center" FooterStyle-HorizontalAlign="Center">
            <ItemTemplate><asp:CheckBox ID="cbTickViewer" runat="server" Checked='<%# Eval("TickViewer") %>'></asp:CheckBox></ItemTemplate>
            <FooterTemplate><asp:CheckBox ID="cbFooterTickViewer" runat="server"></asp:CheckBox></FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton ID="btnSave" runat="server" Text="<i class='fa fa-floppy-o'></i>" OnClick="btnSave_Click" CommandArgument='<%# Eval("ID")%>'/>
            </ItemTemplate>
            <FooterTemplate>
                <asp:LinkButton ID="btnAdd" runat="server" Text="<i class='fa fa-plus'></i> Hinzufügen" OnClick="btnAdd_Click" />
            </FooterTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

我的目标是在单击创建复选框时自动check 和disable 读取复选框。因此，我能够创建以下脚本：

<script>
    document.getElementById('Form').addEventListener('click', function (e) 
        if (e.target.parentElement.getAttribute("class") === 'clicknext') 
            if (jQuery(e.target).is(":checked")) 
                e.target.parentElement.parentElement.nextElementSibling.firstChild.setAttribute("checked", "checked");
                e.target.parentElement.parentElement.nextElementSibling.firstChild.setAttribute("disabled", "disabled");
            
            else 
                e.target.parentElement.parentElement.nextElementSibling.firstChild.removeAttribute("checked");
                e.target.parentElement.parentElement.nextElementSibling.firstChild.removeAttribute("disabled");
            
        
    );
</script>

您可能想知道为什么我使用 .parentElement 两次。这是因为 ASP.net 将在复选框周围包裹一个 span，如果您在其上应用 css-class。

因此，如果我打开包含页面并单击“创建”-复选框，则该脚本就像一个魅力：“读取”-复选框也得到 checked，并且将是 disabled。取消选中“创建”复选框也可以正常工作：“读取”复选框获取unchecked 和reenabled。

但是：只要我手动将“读取”复选框checked 或unchecked 一次，该脚本将不再工作。它仍然能够启用/禁用“读取”复选框并设置选中属性（在开发控制台中看到），但浏览器（Firefox、Chrome）不会将其呈现为checked。

你有什么想法，我在这里做错了什么？提前致谢！

--- 编辑 ---

为了清楚起见，这里是开发工具的复选框输出：

<input id="MainContent_gvSpecificRights_cbTickViewer_0" name="ctl00$MainContent$gvSpecificRights$ctl03$cbTickViewer" checked="checked" disabled="disabled" type="checkbox">

disabled-Attribute 是由浏览器解释的，但 checked-Attribute 如果我之前没有手动触摸它就会被解释。

【问题讨论】：

当您选中复选框时，我猜您的表单正在发回？

我 100% 确定没有回发。如前所述，F12 开发控制台显示了正确的属性。但它没有呈现为选中...

这是什么样子的？

小提琴也适合我。正如我所说：只要我不会在页面加载后更改“读取”复选框，整个脚本就像一个魅力。仅当我至少手动更改了一次检查状态时才会出现。

仅供参考@CoastN。如果你想要一个 jquery 解决方案，你应该添加 jquery 标签。许多人只想要 vanilla javascript，而您的问题中没有任何内容表明 jquery 是一个可行的解决方案。

【参考方案1】：

尝试使用.prop("checked", true) 和.prop("checked", false)

我不久前在jquery set checkbox checked找到了这个

在设置选中的属性时也要小心，它不会被删除。

【讨论】：

他没有使用 jquery