Bootstrap 3 Кнопка Группы

Question

** Bootstrap 3

Я пытаюсь сделать каждый набор кнопок группы уникальны, но различные группы мешают друг другу

<label>Payment Mode</label> 
<div class="btn-group"> 
    <button type="button" class="btn btn-default">Cash/Cheque/Bank Transfer </button> 
    <button type="button" class="btn btn-default">JobsBuddy Disbursement</button> 
</div> 

<label>Payment Period</label> 
<div class="btn-group"> 
     <button type="button" class="btn btn-default">Immediate</button> 
    <button type="button" class="btn btn-default"> More Than 1 day</button> 
</div> 

Как сохранить его уникальный в это собственная группа

Answer 1

Чтобы сохранить уникальную кнопку просто не использовать класс = «БТН-группы»:

<label>Payment Mode</label> 
<div> 
    <button type="button" class="btn btn-default">Cash/Cheque/Bank Transfer </button> 
    <button type="button" class="btn btn-default">JobsBuddy Disbursement</button> 
</div> 

<label>Payment Period</label> 
<div> 
     <button type="button" class="btn btn-default">Immediate</button> 
    <button type="button" class="btn btn-default"> More Than 1 day</button> 
</div> 

Этот класс используется для серии кнопок. Проверить документацию Buttons Group

Answer 2

Нажмите кнопку в группе btn, не устанавливая (активный) класс. Кнопка получает другой фоновой цвет, потому что она фокусируется (: фокус). Нажатие кнопки в другой группе btn устанавливает фокус на эту кнопку.

использовать что-то вроде этого, чтобы установить активный класс за БТН-группы:

$('.btn-group button').click(function() 
{ 
    $(this).parent().children().removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 3

Вы можете использовать Bootstrap при условии кнопки радио группы (http://getbootstrap.com/javascript/#buttons), а затем использовать метод reset, чтобы очистить другая группа ..

HTML:

<label>Payment Mode</label> 
    <div id="mode-group" class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-primary"> 
     <input type="radio" name="mode" id="option1"> Cash/Cheque/Bank Transfer 
    </label> 
    <label class="btn btn-primary"> 
     <input type="radio" name="mode" id="option2"> JobsBuddy Disbursement 
    </label> 
    </div> 

    <label>Payment Period</label> 
    <div id="period-group" class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-primary"> 
     <input type="radio" name="period" id="period1"> Immediate 
    </label> 
    <label class="btn btn-primary"> 
     <input type="radio" name="period" id="period2"> More Than 1 day 
    </label> 
    </div> 

JQuery:

// unselect period when mode is selected 
$("#mode-group .btn").on('click',function(){ 

    $("#period-group").button('reset'); 

}); 

Демо: http://bootply.com/86422

Answer 4

Если вы используете AngularJS Angular UI bootstrap имеет большое решение.

В основном выполните следующие действия с помощью директивы btnRadio.

<div class="btn-group"> 
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label> 
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label> 
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label> 
</div> 

Answer 5

Просто, чтобы упростить его для следующего человека, чтобы прийти, глядя, вот код решения с сайта Bootstrap:

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

В принципе, вы стиль этикетки как кнопки и код опции, как обычный радиоприемник чтобы отделить один набор параметров от другого.