title: Checked="Checked" not working after target Checkbox was clicked once
body: <p>I have the following GridView:</p>
  
  <pre><code>&lt;asp:GridView ID="gvSpecificRights" runat="server" AutoGenerateColumns="false" OnRowCreated="gvSpecificRights_RowCreated" CssClass="mGrid" ShowHeaderWhenEmpty="true" ShowFooter="true"&gt;
      &lt;Columns&gt;
          &lt;asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" /&gt;
          &lt;asp:TemplateField HeaderText="Name"&gt;
              &lt;ItemTemplate&gt;&lt;asp:Label ID="lblName" runat="server" Text='&lt;%# Bind("Name") %&gt;'&gt;&lt;/asp:Label&gt;&lt;/ItemTemplate&gt;
              &lt;FooterTemplate&gt;&lt;asp:DropDownList ID="ddlAvailableUsers" runat="server"&gt;&lt;/asp:DropDownList&gt;&lt;/FooterTemplate&gt;
          &lt;/asp:TemplateField&gt;
          &lt;asp:TemplateField HeaderText="Create" ItemStyle-HorizontalAlign="Center" FooterStyle-HorizontalAlign="Center"&gt;
              &lt;ItemTemplate&gt;&lt;asp:CheckBox ID="cbTickCreator" runat="server" Checked='&lt;%# Eval("TickCreator") %&gt;' CssClass="clicknext"&gt;&lt;/asp:CheckBox&gt;&lt;/ItemTemplate&gt;
              &lt;FooterTemplate&gt;&lt;asp:CheckBox ID="cbFooterTickCreator" runat="server" CssClass="clicknext"&gt;&lt;/asp:CheckBox&gt;&lt;/FooterTemplate&gt;
          &lt;/asp:TemplateField&gt;
          &lt;asp:TemplateField HeaderText="Read" ItemStyle-HorizontalAlign="Center" FooterStyle-HorizontalAlign="Center"&gt;
              &lt;ItemTemplate&gt;&lt;asp:CheckBox ID="cbTickViewer" runat="server" Checked='&lt;%# Eval("TickViewer") %&gt;'&gt;&lt;/asp:CheckBox&gt;&lt;/ItemTemplate&gt;
              &lt;FooterTemplate&gt;&lt;asp:CheckBox ID="cbFooterTickViewer" runat="server"&gt;&lt;/asp:CheckBox&gt;&lt;/FooterTemplate&gt;
          &lt;/asp:TemplateField&gt;
          &lt;asp:TemplateField&gt;
              &lt;ItemTemplate&gt;
                  &lt;asp:LinkButton ID="btnSave" runat="server" Text="&lt;i class='fa fa-floppy-o'&gt;&lt;/i&gt;" OnClick="btnSave_Click" CommandArgument='&lt;%# Eval("ID")%&gt;'/&gt;
              &lt;/ItemTemplate&gt;
              &lt;FooterTemplate&gt;
                  &lt;asp:LinkButton ID="btnAdd" runat="server" Text="&lt;i class='fa fa-plus'&gt;&lt;/i&gt; Hinzufügen" OnClick="btnAdd_Click" /&gt;
              &lt;/FooterTemplate&gt;
          &lt;/asp:TemplateField&gt;
      &lt;/Columns&gt;
  &lt;/asp:GridView&gt;
  </code></pre>
  
  <p>My goal is to automatically <code>check</code> and <code>disable</code> the Read-Checkbox, when the Create-Checkbox is clicked. Therefore I was able to create the following script:</p>
  
  <pre><code>&lt;script&gt;
      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");
              }
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>You may wonder why I was using .parentElement twice. This is because ASP.net will wrap a <code>span</code> around the checkbox, if you apply a css-class on it.</p>
  
  <p>So the script works like a charm if i open the containing page and click the "Create"-Checkbox: The "Read"-Checkbox gets <code>checked</code> too and will be <code>disabled</code>. Unchecking the "Create"-Checkbox also works fine: The "Read"-Checkbox gets <code>unchecked</code> and <code>reenabled</code>.</p>
  
  <p><strong>BUT:</strong> As soon as I've <code>checked</code> or <code>unchecked</code> 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 <code>checked</code>.</p>
  
  <p>Do you have any idea, what I'm doing wrong here? Thanks in advance!</p>
  
  <p>--- EDIT ---</p>
  
  <p>To clear things up, here's the Development-Tools' Output for the Checkbox:</p>
  
  <pre><code>&lt;input id="MainContent_gvSpecificRights_cbTickViewer_0" name="ctl00$MainContent$gvSpecificRights$ctl03$cbTickViewer" checked="checked" disabled="disabled" type="checkbox"&gt;
  </code></pre>
  
  <p>The <code>disabled</code>-Attribute is interpreted by the browser, but the <code>checked</code>-Attribute will just be interpreted if I didn't touch it manually before.</p>