当我关联 runat="server" 属性时，JQuery UI 按钮集在单选按钮上不起作用

Question

我正在创建一个演示应用程序，我想在其中使用单选按钮作为按钮。为此，我正在使用 JQuery UI 按钮集小部件。它之前工作正常，但是当我引入属性 runat="server" 时，实际问题开始了，以便在回发期间保留状态。但是在应用该属性后，buttonset 小部件停止在单选按钮上工作。

所以，我只想要一个解决方案，我可以保留单选按钮控件的状态，同时在它们上应用按钮集小部件。

    <div id="genderOptions">
        <input type="radio" id="genderMale" value="Male" name="gender" />
        <label for="genderMale" >Male </label>
        <input type="radio" id="genderFemale" value="Female" name="gender"/>
        <label for="genderFemale" >Female </label>
    </div>

Output without runat="server" attribute

    <div id="genderOptions">
        <input type="radio" id="genderMale" value="Male" name="gender" runat="server" />
        <label for="genderMale" >Male </label>
        <input type="radio" id="genderFemale" value="Female" name="gender" runat="server" />
         <label for="genderFemale" >Female </label>
    </div>

This is the final output after specifying the attribute runat="server"

Answer 1

runat="server" 属性用于动态更改id 和name 属性。验证您的渲染标记。可能你会看到类似的东西 <input type="radio" id="ctl00_genderMale" value="Male" name="ctl00$gender" /> 我假设您在初始化按钮集小部件的 JS 中使用 id 指定输入字段。尝试使用标签或类选择器：

$("#genderOptions").buttonset({
    items: "input[type=radio]"
});