Переключить одну кнопку на время Bootstrap

Question

Я играл с этим в течение последнего часа и не могу понять, как можно переключаться одной кнопкой одновременно. Также пытаюсь изменить кнопку на другой цвет. Поэтому, если я нажму кнопку button1, он переключится. Если я затем нажму кнопку2, то кнопки 1 развяжутся и кнопки 2 переключится. Вот что я до сих пор

<div class="Demo-boot" style="padding:30px;"> 
<button type="button" class="btn btn-primary" data-toggle="button">Button1</button> 
     <button type="button" class="btn btn-primary" data-toggle="button">Button2</button> 
    </div> 

Здесь в действии: http://www.bootply.com/MaxkTJs3HH

Answer 1

сначала добавить некоторые ids к кнопкам

<div class="Demo-boot" style="padding:30px;"> 
    <button id="button_one" type="button" class="btn btn-primary" data-toggle="button">Button1</button> 
    <button id="button_two" type="button" class="btn btn-primary" data-toggle="button">Button2</button> 
</div> 

Далее добавить некоторые jquery

$('#button_one').click(function (e) { 
    $('#button_two').removeClass('active') 
}); 

$('#button_two').click(function (e) { 
    $('#button_one').removeClass('active') 
}); 

приработки продукта: http://www.bootply.com/tT4yYWxjyk

Answer 2

Вы должны установить его в группе кнопок, как этот ::

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-primary active"> 
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Button 1 
    </label> 
    <label class="btn btn-primary"> 
    <input type="radio" name="options" id="option2" autocomplete="off"> Button 2 
    </label> 
</div>