引导单选按钮与数据切换不工作

Bootstrap radio-buttons not working with data-toggle

本文关键字：工作 数据 单选按钮      更新时间：2023-09-26

我对HTML和Bootstrap/jQuery非常陌生。

我有一个表单，我正在使用BS按钮。它们应该像单选按钮一样，也就是说，当它们被按下时，背景颜色应该变深(就像这个例子一样)。但不知何故，它不起作用。以下是代码的摘录:有没有人有一个线索或提示如何做到这一点?谢谢你。

<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/.

的解决方案是抑制所有的css从JQuery移动为您的按钮，只是添加这一行来隐藏单选按钮:

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

相关文章：