Question

我正在尝试使用Bootstrap创建一个开/关按钮切换。当选择“开”时，我希望背景为绿色，并且我希望“关闭”按钮变灰并且透明。选择“关闭”时，我希望它为红色，我希望取消选择“开”。我发现的所有示例都处理了禁用按钮，但我不想禁用任何一个按钮。我知道如何在CSS中实现颜色和透明度，但我不知道如何通过使用带有Bootstrap的CSS选择器来实现我想要的东西。我是否必须为此创建自己的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

我相信这是你正在尝试做的事情。

＆＃13;

RuntimeException

＆＃13;

$('.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');

});

＆＃13;

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

＆＃13;

Bootstrap：单选按钮切换着色

1 个答案: