Bootstrap单选按钮不支持数据切换

我对HTML和Bootstrap/jQuery相当陌生。Bootstrap单选按钮不支持数据切换

我有一个表单，我正在使用BS按钮。它们应该充当无线电按钮，这意味着当它们被按下时，背景颜色应该变暗（如在此example中）。但不知何故，它不起作用。下面是代码片段：有没有人有线索或提示如何做到这一点？谢谢。

<head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
    <title>Survey</title> 
    <script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script> 
    <script type="text/javascript" src="jquery.touchSwipe.js"></script> 
    <script type="text/javascript" src="bootstrap.min.js"></script> 
    <script type="text/javascript" src="Languages.js"></script> 
    <script type="text/javascript" src="LoadLanguages.js"></script> 
    <link rel="stylesheet" href="bootstrap.min.css"/> 
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css"/> 
</head>

这是一组单选按钮的一个问题：

<div class="row"> 
    <div class="col-xs-12; col-sm-6; col-md-6; col-lg-4"> 
     <legend id="s_p01_q02"></legend> 
    </div> 
</div> 
<div class="row"> 
    <div class="btn-group btn-block" data-toggle="buttons"> 
    <div class="col-xs-12; col-sm-3; col-md-3; col-lg-4"> 
     <label for="s_p01_q02_rb01" class="btn btn-primary btn-block"> 
     <input name="s_p01_q02" id="s_p01_q02_rb01" value="Option 1" type="radio"/> 
     </label> 
     <label for="s_p01_q02_rb03" class="btn btn-primary btn-block"> 
     <input name="s_p01_q02" id="s_p01_q02_rb03" value="Option 3" type="radio" class="btn-group btn-group-justified"/> 
     </label> 
     <label for="s_p01_q02_rb05" class="btn btn-primary btn-block"> 
     <input name="s_p01_q02" id="s_p01_q02_rb05" value="Option 5" type="radio" class="btn-group btn-group-justified"/> 
     </label>    
    </div> 
    <div class="col-xs-12; col-sm-3; col-md-3; col-lg-4"> 
     <label for="s_p01_q02_rb02" class="btn btn-primary btn-block"> 
     <input name="s_p01_q02" id="s_p01_q02_rb02" value="Option 2" type="radio"/> 
     </label> 
     <label for="s_p01_q02_rb04" class="btn btn-primary btn-block"> 
     <input name="s_p01_q02" id="s_p01_q02_rb04" value="Option 3" type="radio" class="btn-group btn-group-justified"/> 
     </label> 
     <input name="s_p01_q02" id="s_p01_q02_ti01" value="" type="text" maxlength="350" class="btn-block"/> 
    </div> 
    </div> 
</div>

来源

2015-09-06 user3185735

我把代码放在我的一个项目中，它的工作原理是：.btn-primary.active，.btn-primary：active { background-color：＃265a88; border-color：＃245580; } –

你可以在http://jsfiddle.net/上做演示吗？ –

jsfiddle。 –

试图将jQuery Mobile和引导相结合可以和一些部件看起来像引导别人看着像jQuery结果移动。如果你没有在该页面添加JQuery Mobile，你会看到你可以得到你想要的结果http://jsfiddle.net/MadalinaTn/pqyf31pv/。

解决的办法是取消所有从jQuery Mobile的的CSS您的按钮，只是加入这一行隐藏的单选按钮：

input[type=radio], input[type=checkbox] { 
    visibility: hidden; 
}

我希望这有助于。

来源

2015-09-06 09:37:17

作品完美:)非常感谢你 – user3185735

欢迎！我很高兴它工作:)！ –

Bootstrap单选按钮不支持数据切换

回答

相关问题