如果使用代码runat =＆＃34; server＆＃34;

Question

<ul class="ulGroup" runat="server" id="ulGroup">
    <li>
        <input type="radio" name="grouptype" id="rdGroup1" class="css-checkbox" value="Group 1" />
        <label for="rdGroup1" class="css-label radGroup1">Group 1</label>
    </li>
    <li>
        <input type="radio" name="grouptype" id="rdGroup2" class="css-checkbox" value="Group 2" />
        <label for="rdGroup2" class="css-label radGroup1">Group 2</label>
    </li>
    <li>
        <input type="radio" name="grouptype" id="rdGroup3" class="css-checkbox" value="Group 3" />
        <label for="rdGroup3" class="css-label radGroup1">Group 3</label>
    </li>
    <li>
        <input type="radio" name="grouptype" id="rdGroup4" class="css-checkbox" value="Group 4" />
        <label for="rdGroup4" class="css-label radGroup1">Group 4</label>
    </li>
</ul>

上面的代码对我来说很好，但是当我为每个单选按钮添加runat="server"时，它会被禁用，这意味着我无法选择它。

我试图获取单选按钮的值并使用它来保存到SQL表：

public string getSelectedRadioButton()
{
    string radioSelected = string.Empty;
    foreach (Control control in ulGroup.Controls)
    {
        if (control.GetType().Name.Equals("HtmlInputRadioButton") && (control as HtmlInputRadioButton).Checked)
        {
            radioSelected = (control as HtmlInputRadioButton).Value; break;
        }
    }
    return radioSelected;
}
...
qSave.Parameters.AddWithValue("@DietGroup", getSelectedRadioButton());

作品（我可以选择它）：

<li>
    <input type="radio" name="grouptype" id="rdGroup1" class="css-checkbox" value="Group 1" />
    <label for="rdGroup1" class="css-label radGroup1">Group 1</label>
</li>

无效（该选项已停用）：

<li>
    <input type="radio" name="grouptype" id="rdGroup1" class="css-checkbox" value="Group 1" runat="server" />
    <label for="rdGroup1" class="css-label radGroup1">Group 1</label>
</li>

如何在保持样式的同时修改代码，以确保单选按钮可单击。

以下是更新：

ASP.net的HTML输出：

<ul id="CPB_ulGroup" class="ulGroup">
    <li>
        <input type="radio" name="grouptype" id="rdGroup1" class="css-checkbox" value="Group 1">
        <label for="rdGroup1" class="css-label radGroup1">Group 1</label>
    </li>
    <li>
        <input type="radio" name="grouptype" id="rdGroup2" class="css-checkbox" value="Group 2">
        <label for="rdGroup2" class="css-label radGroup1">Group 2</label>
    </li>
    <li>
        <input value="Group 3" name="ctl00$CPB$grouptype" type="radio" id="CPB_rdGroup3" class="css-checkbox">
        <label for="rdGroup3" class="css-label radGroup1">Group 3</label>
    </li>
    <li>
        <input value="Group 4" name="ctl00$CPB$grouptype" type="radio" id="CPB_rdGroup4" class="css-checkbox">
        <label for="rdGroup4" class="css-label radGroup1">Group 4</label>
    </li>
</ul>

如果在开发者控制台中我将两个底部单选按钮更改为两个顶部单选按钮的按钮，则可以正常工作：

<ul id="CPB_ulGroup" class="ulGroup">
    <li>
        <input type="radio" name="grouptype" id="rdGroup1" class="css-checkbox" value="Group 1">
        <label for="rdGroup1" class="css-label radGroup1">Group 1</label>
    </li>
    <li>
        <input type="radio" name="grouptype" id="rdGroup2" class="css-checkbox" value="Group 2">
        <label for="rdGroup2" class="css-label radGroup1">Group 2</label>
    </li>
    <li>
        <input value="Group 3" name="grouptype" type="radio" id="rdGroup3" class="css-checkbox">
        <label for="rdGroup3" class="css-label radGroup1">Group 3</label>
    </li>
    <li>
        <input value="Group 4" name="grouptype" type="radio" id="rdGroup4" class="css-checkbox">
        <label for="rdGroup4" class="css-label radGroup1">Group 4</label>
    </li>
</ul>

另一次更新：

<ul class="ulGroup" runat="server" id="ulGroup">
    <li>
        <asp:RadioButton ID="rdGroup1" ClientIDMode="Static" CssClass="css-checkbox" runat="server" Text="" GroupName="WhichGroup" AutoPostBack="false" />
        <%--<input type="radio" name="grouptype" id="rdGroup1" class="css-checkbox" value="Group 1" />--%>
        <label for="rdGroup1" class="css-label radGroup1">Group 1</label>
    </li>
    <li>
        <input type="radio" name="grouptype" id="rdGroup2" class="css-checkbox" value="Group 2" />
        <label for="rdGroup2" class="css-label radGroup1">Group 2</label>
    </li>
    <li>
        <input type="radio" name="grouptype" id="rdGroup3" class="css-checkbox" value="Group 3" runat="server" />
        <label for="rdGroup3" class="css-label radGroup1">Group 3</label>
    </li>
    <li>
        <input type="radio" name="grouptype" id="rdGroup4" class="css-checkbox" value="Group 4" runat="server" />
        <label for="rdGroup4" class="css-label radGroup1">Group 4</label>
    </li>
</ul>

HTML输出：

...
<li>
    <span class="css-checkbox"><input id="rdGroup1" type="radio" name="ctl00$CPB$WhichGroup" value="rdGroup1"></span>
    <label for="rdGroup1" class="css-label radGroup1">Group 1</label>
</li>
...

这就是显示的内容：