引导：单选按钮切换着色(Bootstrap: Radio button toggle colorin

我试图创建一个自举开/关按钮切换。当“开”时我希望背景是绿色的，我想“关闭”按钮变灰，透明。当“关”时，我希望它是红色的，我想“开”就被撤销。所有的例子，我发现处理禁用的按钮，但我不希望禁用任一按钮。我知道如何实现在CSS的颜色和透明度，但我不知道我怎么可以使用CSS选择器与引导实现我想要的东西。我必须使自己的CSS类为这个或不引导已建成的东西？

的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>

我相信这是你想要做什么。

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