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

Ответ 1

Возможно, вы захотите использовать группы 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

Ответ 2

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

Используйте что-то вроде этого, чтобы установить активный класс для каждой группы btn:

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

Ответ 3

Если вы используете AngularJS, Angular пользовательский загрузочный файл имеет отличное решение.

В основном выполните следующие действия с помощью директивы 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>

Ответ 4

Чтобы сохранить уникальную кнопку, просто не используйте class= "btn-group" :

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

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

Ответ 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>

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