jquery - 使 asp.net radiobuttonlist 显示为 Bootstrap 按钮组

Question

我有一个设置页面，允许用户打开和关闭某些警报。这些打开和关闭开关属于 RadioButtonList 控件。我没有运气尝试使用 Bootstrap 类或自定义类来获得我想要的效果。

基本上我有这个:

但我希望它看起来像这样:

如果你们中的任何人以这种方式成功设计了 asp.net RadioButtonList，我将非常感谢你的帮助!

编辑

我曾尝试在列表项上强制上课

<div class="btn-group">
    <asp:RadioButtonList ID="Rbl_MinBal" runat="server" RepeatDirection="Horizontal">
          <asp:ListItem Text="On" Value="0" class="btn btn-default" />
          <asp:ListItem Text="Off" Value="1" class="btn btn-default" />
    </asp:RadioButtonList>
</div>

不理想:

Answer 1

使用下面的代码得到相同的结果

    <div id="radio-group" class="btn-group" data-toggle="buttons">
        <asp:RadioButton GroupName="myGroup" ID="RadioButton1" runat="server" Checked="True"  CssClass="btn btn-default" Text="On" />
        <asp:RadioButton GroupName="myGroup" ID="RadioButton2" runat="server" CssClass="btn btn-default" Text="Off" />
    </div>

CSS

#radio-group label {
    margin: 0;
}

JQuery

$("#radio-group :radio").each(function () {
    if ($(this).is(':checked')) {
        $(this).parent().addClass("active");
    }
});