Checked="Checked" not working after target Checkbox was clicked once

Question

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.

I'd guess your form is posting back when you check the checkboxes? — Liam, Apr 27 '17 at 08:59
I'm 100% sure that there is no postback. As mentioned the F12 Development Console is showing the right attributes. But it's not rendering as checked... — CoastN, Apr 27 '17 at 09:05
I've added the DevTools-Output. On the Browser it looks like a disabled but unchecked Checkbox, because he is ignoring the `checked`-Attribute — CoastN, Apr 27 '17 at 09:15
That HTML works fine for me. https://jsfiddle.net/j0aefyL2/. you must have some other issue here. — Liam, Apr 27 '17 at 09:18
Yep, I'm testing that on Chrome and it works. I'm taking you see the same on the same fiddle? You must be overridding the standard look somehow I'd guess — Liam, Apr 27 '17 at 09:21
The fiddle works for me too. As I said: As long as I won't have changed the "Read"-Checkbox once after pageload, the whole script works like a charm. It only appears if I have changed the checkstatus at least once manually. — CoastN, Apr 27 '17 at 09:23
I've removed my comments. My memory is too hazy on this and I'm worried about pointing you in the wrong direction. I think I'll leave it for others to answer, good luck. I'm reasonably sure it's a post back issue. — Liam, Apr 27 '17 at 09:47
No Problem, thank you anyways for your time and help :) For me it looks like there is some attribute, which can't be seen by looking at the control itself, but it seems to have a higher priority than the `checked`-Attribute. Because if you check a checkbox manually, chrome is not adding the `checked`-Attribute to this control. It must be stored anywhere... — CoastN, Apr 27 '17 at 09:52
Yes, that'll be the ViewState. Unfortunately you can't access this clientside. — Liam, Apr 27 '17 at 10:03
Just FYI @CoastN. If you wish a jquery solution, you should add the jquery tag. Many people only want vanilla javascript and there was nothing in your question to suggest that jquery was a viable solution. — Liam, Apr 27 '17 at 10:14

score 2 · Accepted Answer · edited May 23 '17 at 12:17

2

try using .prop("checked", true) and .prop("checked", false)

I found this few time ago at jquery set checkbox checked

Also be careful while setting checked property, that it is not removed.

edited May 23 '17 at 12:17

Community

1
1

answered Apr 27 '17 at 08:56

Shahzad

131
4

1

He's not using jquery – Liam Apr 27 '17 at 09:10

Checked="Checked" not working after target Checkbox was clicked once

1 Answers1