使 asp.net 单选按钮列表显示为引导按钮组

Posted 2023-05-08

【中文标题】使 asp.net 单选按钮列表显示为引导按钮组

【英文标题】：Make asp.net radiobuttonlist appear as bootstrap button group

【发布时间】：2015-01-24 06:18:15

【问题描述】：

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

基本上我有这个：

但我希望它类似于这样：

如果你们中的任何人以这种方式成功地设计了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>

不理想：

【问题讨论】：

你能贴出你试过的任何代码吗？

@BrendanHannemann 查看编辑

看看Bootstrap switch 对于复选框和单选按钮来说非常简单实用

【参考方案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");
    
);

【参考方案2】：

通过在正确的位置设置 css 和数据切换，我能够正确呈现它。

<asp:RadioButtonList ID="test" runat="server" RepeatLayout="flow" RepeatDirection="Horizontal" CssClass="btn-group" data-toggle="buttons">
   <asp:ListItem class="btn btn-default">Item 1</asp:ListItem>
   <asp:ListItem class="btn btn-default">Item 2</asp:ListItem>
   <asp:ListItem class="btn btn-default">Item 3</asp:ListItem>
   <asp:ListItem class="btn btn-default">Item 4</asp:ListItem>
</asp:RadioButtonList>

【讨论】：

很好的解决方案，虽然如果我们使用 AutoPostback 这将破坏该功能。修复手动引发更改事件。 onchange="BootstrapRadioButtonPostback(this);" 喜欢 function BootstrapRadioButtonPostback(elm) __doPostBack(elm.id, "");