Twitter bootstrap 引导：单选按钮切换颜色

我正在尝试使用引导创建一个开/关按钮切换。当选择“开”时，我希望背景为绿色，我希望“关”按钮灰显透明。当选择“关”时，我希望它是红色的，我希望取消选择“开”。我发现的所有示例都涉及禁用的按钮，但我不想禁用其中任何一个按钮。我知道如何在CSS中实现颜色和透明度，但我不知道如何通过使用CSS选择器和引导实现我想要的。我是否必须为此制作自己的CSS类，或者引导程序是否内置了一些东西

JSFiddle

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>

在…上
关

我相信这就是你想要做的

$（'.btn toggle'）。单击（函数（）{
$（this.find（'.btn'）.toggleClass（'active'）；
if（$（this）.find（'.btn绿色'）.size（）>0）{
$（this.find（'.btn'）.toggleClass（'btn-red'）；
}
$（this.find（'.btn'）.toggleClass（'btn-default'）；
});
.btn绿色{
背景颜色：绿色；
}
.btn红色{
背景色：红色；
}
.包裹{
利润率：120像素；
}

在…上
关
我相信这就是你想要做的


$（'.btn toggle'）。单击（函数（）{
$（this.find（'.btn'）.toggleClass（'active'）；
if（$（this）.find（'.btn绿色'）.size（）>0）{
$（this.find（'.btn'）.toggleClass（'btn-red'）；
}
$（this.find（'.btn'）.toggleClass（'btn-default'）；
});
.btn绿色{
背景颜色：绿色；
}
.btn红色{
背景色：红色；
}
.包裹{
利润率：120像素；
}

在…上
关
没有Javascript就没有办法做到这一点吗？我已经将所有这些复制到一个HTML文件中，但它不起作用？！没有Javascript就没有办法做到这一点吗？我已经将所有这些复制到一个HTML文件中，但它不起作用？！