Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/39.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 使asp.net RadioButton列表显示为引导按钮组_Jquery_Css_Asp.net_Twitter Bootstrap - Fatal编程技术网

Jquery 使asp.net RadioButton列表显示为引导按钮组

Jquery 使asp.net RadioButton列表显示为引导按钮组,jquery,css,asp.net,twitter-bootstrap,Jquery,Css,Asp.net,Twitter Bootstrap,我有一个设置页面,允许用户打开和关闭某些警报。 这些接通和断开开关由无线电按钮列表控制。我没有任何运气尝试使用引导类或自定义类来获得我想要的效果 基本上我有: 但我希望它像这样: 如果你们中的任何一位在设计asp.net RadioButtonList 编辑 我已尝试强制列表项上的类本身 <div class="btn-group"> <asp:RadioButtonList ID="Rbl_MinBal" runat="server" RepeatDirectio

我有一个设置页面,允许用户打开和关闭某些警报。 这些接通和断开开关由
无线电按钮列表
控制。我没有任何运气尝试使用引导类或自定义类来获得我想要的效果

基本上我有:

但我希望它像这样:

如果你们中的任何一位在设计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>

不理想:


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

    <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>
JQuery

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

通过在正确的位置设置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>

项目1
项目2
项目3
项目4

您能发布您尝试过的任何代码吗?@Brendanhanemann请参阅编辑查看复选框和RadioButton的非常简单和有用的解决方案良好的解决方案,尽管如果我们使用AutoPostback,这将破坏该功能。若要手动修复,请引发“更改时”事件
onchange=“BootstrapRadioButtonPostback(this);”
like so
函数BootstrapRadioButtonPostback(elm){uu doPostBack(elm.id,”);}
<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>