Question

我是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>

Answer 1

尝试组合JQuery Mobile和Bootstrap的结果可能是一些看起来像Bootstrap的组件和其他看起来像JQuery Mobile的组件。如果您不在该页面中添加JQuery Mobile，您将看到可以获得所需的结果http://jsfiddle.net/MadalinaTn/pqyf31pv/。

该解决方案是为您的按钮抑制JQuery Mobile的所有css，只需添加此行以隐藏单选按钮：

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

我希望这会有所帮助。

Bootstrap单选按钮不使用数据切换

1 个答案: