引导 btn-group 单选按钮在实时服务器上不起作用答案

【问题标题】：bootstrap btn-group radio buttons not working on live server引导 btn-group 单选按钮在实时服务器上不起作用
【发布时间】：2017-05-04 14:44:17
【问题描述】：

我正在为单选按钮使用引导 btn-group 类。它们无法在实时服务器上运行。我的网站正在开发 example.com 。尽管它们在单独的 html 页面上运行。

  <div class="row">
<section class="col-lg-2 col-xs-3">
<label>Gender:</label></section>
<section class="col-lg-4 col-xs-8">
<div class="btn-group" data-toggle="buttons">

  <label class="btn btn-primary control-label input-group">
    <input type="radio" name="gender" id="option2" autocomplete="off" value="male">Male
  </label>
  <label class="btn btn-primary ">
    <input type="radio" name="gender" id="option3" autocomplete="off" value="female" checked> Female
  </label>
</div>
</section>
</div>

【问题讨论】：

没有与我尝试JSFiddle 相关的具体问题。任何控制台错误？
@Zeratops 实际上它已经在本地机器上的纯 html 上工作，但在我的网站上它不起作用。而且没有控制台错误

标签： html css twitter-bootstrap twitter-bootstrap-3 radio-button

【解决方案1】：

.btn > input[type="radio"] {
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <div class="row">
<section class="col-lg-2 col-xs-3">
<label>Gender:</label></section>
<section class="col-lg-4 col-xs-8">
<div class="btn-group" data-toggle="buttons">

  <label class="btn btn-primary control-label input-group">
    <input type="radio" name="gender" id="option2" autocomplete="off" value="male">Male
  </label>
  <label class="btn btn-primary ">
    <input type="radio" name="gender" id="option3" autocomplete="off" value="female" checked> Female
  </label>
</div>
</section>
</div>

添加

.btn > input[type="radio"] {
  display: none;
}

在你的 CSS 中

【讨论】：

你是否导入了 bootstrap.min.js 文件，在此之前也导入了 jquery 文件
实际上它已经在本地机器上的纯 html 上工作，但在我的网站上它不工作

【解决方案2】：

$(document).ready(function(){
    $('.gender').on('click', function() {
      $('.checked').removeClass('checked');
      $(this).addClass('checked');
    });
});

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.checked {
  background-color: #286090;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <section class="col-lg-2 col-xs-3">
    <label>Gender:</label>
  </section>
  <section class="col-lg-4 col-xs-8">
    <div class="btn-group" data-toggle="buttons">

      <label class="btn btn-primary control-label input-group gender">
        <input type="radio" name="gender" id="option2" autocomplete="off" value="male">Male
      </label>
      <label class="btn btn-primary gender">
        <input type="radio" name="gender" id="option3" autocomplete="off" value="female" checked> Female
      </label>
    </div>
  </section>
</div>

【讨论】：