title: Why are radio buttons disabled if using the code runat="server"
body: <pre><code>&lt;ul class="ulGroup" runat="server" id="ulGroup"&gt;
      &lt;li&gt;
          &lt;input type="radio" name="grouptype" id="rdGroup1" class="css-checkbox" value="Group 1" /&gt;
          &lt;label for="rdGroup1" class="css-label radGroup1"&gt;Group 1&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;input type="radio" name="grouptype" id="rdGroup2" class="css-checkbox" value="Group 2" /&gt;
          &lt;label for="rdGroup2" class="css-label radGroup1"&gt;Group 2&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;input type="radio" name="grouptype" id="rdGroup3" class="css-checkbox" value="Group 3" /&gt;
          &lt;label for="rdGroup3" class="css-label radGroup1"&gt;Group 3&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;input type="radio" name="grouptype" id="rdGroup4" class="css-checkbox" value="Group 4" /&gt;
          &lt;label for="rdGroup4" class="css-label radGroup1"&gt;Group 4&lt;/label&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The above code works fine for me but when I add the <code>runat="server"</code> for each radio button it becomes disabled, meaning I can't select it.</p>
  
  <p>I am trying to get the value of the radio button and use it to save to a SQL table:</p>
  
  <pre><code>public string getSelectedRadioButton()
  {
      string radioSelected = string.Empty;
      foreach (Control control in ulGroup.Controls)
      {
          if (control.GetType().Name.Equals("HtmlInputRadioButton") &amp;&amp; (control as HtmlInputRadioButton).Checked)
          {
              radioSelected = (control as HtmlInputRadioButton).Value; break;
          }
      }
      return radioSelected;
  }
  ...
  qSave.Parameters.AddWithValue("@DietGroup", getSelectedRadioButton());
  </code></pre>
  
  <p>Works (I am able to select it):</p>
  
  <pre><code>&lt;li&gt;
      &lt;input type="radio" name="grouptype" id="rdGroup1" class="css-checkbox" value="Group 1" /&gt;
      &lt;label for="rdGroup1" class="css-label radGroup1"&gt;Group 1&lt;/label&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Doesn't work (the option is disabled):</p>
  
  <pre><code>&lt;li&gt;
      &lt;input type="radio" name="grouptype" id="rdGroup1" class="css-checkbox" value="Group 1" runat="server" /&gt;
      &lt;label for="rdGroup1" class="css-label radGroup1"&gt;Group 1&lt;/label&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>How can I modify the code, while keeping the style, to ensure the radio buttons are clickable.</p>
  
  <p><strong>Here is an update</strong>:</p>
  
  <p>HTML output from ASP.net:</p>
  
  <pre><code>&lt;ul id="CPB_ulGroup" class="ulGroup"&gt;
      &lt;li&gt;
          &lt;input type="radio" name="grouptype" id="rdGroup1" class="css-checkbox" value="Group 1"&gt;
          &lt;label for="rdGroup1" class="css-label radGroup1"&gt;Group 1&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;input type="radio" name="grouptype" id="rdGroup2" class="css-checkbox" value="Group 2"&gt;
          &lt;label for="rdGroup2" class="css-label radGroup1"&gt;Group 2&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;input value="Group 3" name="ctl00$CPB$grouptype" type="radio" id="CPB_rdGroup3" class="css-checkbox"&gt;
          &lt;label for="rdGroup3" class="css-label radGroup1"&gt;Group 3&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;input value="Group 4" name="ctl00$CPB$grouptype" type="radio" id="CPB_rdGroup4" class="css-checkbox"&gt;
          &lt;label for="rdGroup4" class="css-label radGroup1"&gt;Group 4&lt;/label&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>If, in Developer Console I change the two bottom radio buttons to that of the two top radio buttons, it works fine:</p>
  
  <pre><code>&lt;ul id="CPB_ulGroup" class="ulGroup"&gt;
      &lt;li&gt;
          &lt;input type="radio" name="grouptype" id="rdGroup1" class="css-checkbox" value="Group 1"&gt;
          &lt;label for="rdGroup1" class="css-label radGroup1"&gt;Group 1&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;input type="radio" name="grouptype" id="rdGroup2" class="css-checkbox" value="Group 2"&gt;
          &lt;label for="rdGroup2" class="css-label radGroup1"&gt;Group 2&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;input value="Group 3" name="grouptype" type="radio" id="rdGroup3" class="css-checkbox"&gt;
          &lt;label for="rdGroup3" class="css-label radGroup1"&gt;Group 3&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;input value="Group 4" name="grouptype" type="radio" id="rdGroup4" class="css-checkbox"&gt;
          &lt;label for="rdGroup4" class="css-label radGroup1"&gt;Group 4&lt;/label&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Another update</strong>:</p>
  
  <pre><code>&lt;ul class="ulGroup" runat="server" id="ulGroup"&gt;
      &lt;li&gt;
          &lt;asp:RadioButton ID="rdGroup1" ClientIDMode="Static" CssClass="css-checkbox" runat="server" Text="" GroupName="WhichGroup" AutoPostBack="false" /&gt;
          &lt;%--&lt;input type="radio" name="grouptype" id="rdGroup1" class="css-checkbox" value="Group 1" /&gt;--%&gt;
          &lt;label for="rdGroup1" class="css-label radGroup1"&gt;Group 1&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;input type="radio" name="grouptype" id="rdGroup2" class="css-checkbox" value="Group 2" /&gt;
          &lt;label for="rdGroup2" class="css-label radGroup1"&gt;Group 2&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;input type="radio" name="grouptype" id="rdGroup3" class="css-checkbox" value="Group 3" runat="server" /&gt;
          &lt;label for="rdGroup3" class="css-label radGroup1"&gt;Group 3&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;input type="radio" name="grouptype" id="rdGroup4" class="css-checkbox" value="Group 4" runat="server" /&gt;
          &lt;label for="rdGroup4" class="css-label radGroup1"&gt;Group 4&lt;/label&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>HTML output:</p>
  
  <pre><code>...
  &lt;li&gt;
      &lt;span class="css-checkbox"&gt;&lt;input id="rdGroup1" type="radio" name="ctl00$CPB$WhichGroup" value="rdGroup1"&gt;&lt;/span&gt;
      &lt;label for="rdGroup1" class="css-label radGroup1"&gt;Group 1&lt;/label&gt;
  &lt;/li&gt;
  ...
  </code></pre>
  
  <p>This is what is shown:</p>
  
  <p><img src="https://i.stack.imgur.com/SZ6I5.png" alt="enter image description here"></p>