I have the following 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> My goal is to automatically check and disable the Read-Checkbox, when the Create-Checkbox is clicked. Therefore I was able to create the following script:
<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> You may wonder why I was using .parentElement twice. This is because ASP.net will wrap a span around the checkbox, if you apply a css-class on it.
So the script works like a charm if i open the containing page and click the "Create"-Checkbox: The "Read"-Checkbox gets checked too and will be disabled. Unchecking the "Create"-Checkbox also works fine: The "Read"-Checkbox gets unchecked and reenabled.
BUT: As soon as I've checked or unchecked the "Read"-Checkbox manually once, the script won't work anymore. It's still able to enable/disable the "Read"-Checkbox and also sets the checked-attribute (seen over development-console), but the browsers (Firefox, Chrome) will not render it as checked.
Do you have any idea, what I'm doing wrong here? Thanks in advance!
--- EDIT ---
To clear things up, here's the Development-Tools' Output for the Checkbox:
<input id="MainContent_gvSpecificRights_cbTickViewer_0" name="ctl00$MainContent$gvSpecificRights$ctl03$cbTickViewer" checked="checked" disabled="disabled" type="checkbox"> The disabled-Attribute is interpreted by the browser, but the checked-Attribute will just be interpreted if I didn't touch it manually before.
