我对 HTML 和 Bootstrap/jQuery 还很陌生。
我有一个表单，我正在使用 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>
最佳答案
尝试组合 JQuery Mobile 和 Bootstrap 的结果可能是一些组件看起来像 Bootstrap，而其他组件看起来像 JQuery Mobile。如果您不在该页面中添加 JQuery Mobile，您将看到您可以获得想要的结果 http://jsfiddle.net/MadalinaTn/pqyf31pv/ .
解决方案是为您的按钮抑制来自 JQuery Mobile 的所有 css，只需添加此行以隐藏单选按钮:
input[type=radio], input[type=checkbox] {
visibility: hidden;
}
希望对您有所帮助。
关于javascript - Bootstrap 单选按钮不适用于数据切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32421394/