Bootstrap：单选按钮切换着色

Question

我正在尝试使用 Bootstrap 创建一个 on/off 按钮开关。选择 "On" 时，我希望背景为绿色，并且希望 "Off" 按钮变灰并透明。当 "Off" 被选中时，我希望它是红色的，我希望 "On" 被取消选择。我发现的所有示例都与禁用按钮有关，但我不想禁用其中任何一个按钮。我知道如何在 CSS 中实现颜色和透明度，但我不知道如何通过使用 CSS 选择器和 Bootstrap 来实现我想要的。我必须为此制作自己的 CSS 类还是 Bootstrap 有内置的东西？

JSFiddle http://jsfiddle.net/UltraSonja/4pbpmqgu/

HTML

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-sm btn-primary green">
        <input type="radio" name="options" id="RTTOn" autocomplete="off">ON</input>
    </label>
    <label class="btn btn-sm btn-primary red">
        <input type="radio" name="options" id="RTTOff" autocomplete="off">OFF</input>
    </label>
</div>

Answer 1

我相信这就是你想要做的。

$('.btn-toggle').click(function() {
  $(this).find('.btn').toggleClass('active');

  if ($(this).find('.btn-green').size() > 0) {
    $(this).find('.btn').toggleClass('btn-red');
  }

  $(this).find('.btn').toggleClass('btn-default');

});

.btn-green {
  background-color: green;
}
.btn-red {
  background-color: red;
}
.wrap {
  margin: 120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="container wrap">
  <div class="btn-group btn-toggle">
    <button class="btn btn-lg btn-green">ON</button>
    <button class="btn btn-lg btn-default active">OFF</button>
  </div>
</div>

Bootstrap：单选按钮切换着色

Bootstrap: Radio button toggle coloring

button

twitter-bootstrap