单击目标Checkbox一次后,Checked =“Checked”无法正常工作

时间:2017-04-27 07:51:00

标签: javascript html asp.net checkbox webforms

我有以下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>

我的目标是在单击“创建 - 复选框”时自动checkdisable读取复选框。因此我能够创建以下脚本:

<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。这是因为如果在其上应用css类,ASP.net将在复选框周围包裹span

因此,如果我打开包含页面并单击“创建”-Checkbox,脚本的工作方式就像魅力一样:“读取”-Checkbox也会checked获得disabled。取消选中“创建”-Checkbox也可以正常工作:“阅读”-Checkbox获取uncheckedreenabled

但是只要我手动checkedunchecked“读取”-Checkbox一次,脚本将不再有效。它仍然能够启用/禁用“读取”-Checkbox并设置checked-attribute(在开发控制台上看到),但浏览器(Firefox,Chrome)不会将其呈现为checked

你有什么想法,我在这里做错了什么?提前谢谢!

---编辑---

为了清理,这里是Checkbox的开发工具输出:

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

disabled - 属性由浏览器解释,但如果我之前没有手动触摸它,则会解释checked - 属性。

1 个答案:

答案 0 :(得分:1)

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

我前几天在jquery set checkbox checked

找到了这个

设置checked属性时也要小心,不要删除它。