Динамическая настраиваемая группа кнопок Bootstrap

Я использую Bootstrap 3.1.x, и я хочу иметь переключаемую группу переключателей статуса, которая меняет цвета радио ярлыков на основе выбранного активного элемента.

У меня есть два переключателя: "Публикация" и "Черновик".

Мне нужно поменять .btn-success когда выбрана .btn-default и .btn-default если это не так.

Мне также нужно поменять .btn-danger когда выбран Draft, и .btn-default когда это не так.

Разметка (по умолчанию - состояние проекта):

<div data-toggle="buttons" data-toggle-default-class="btn-default">
 <label data-toggle-class="btn-success">
 
 Published
 </label>
 <label data-toggle-class="btn-danger">
 
 Draft
 </label>
</div>

Я использую атрибут data-toggle-default-class в .btn-group чтобы сообщить цвет класса кнопки по умолчанию. Более того, я использую атрибут атрибута data-toggle-class на ярлыках, чтобы указать, какой цвет его кнопки он должен использовать при выборе.

JavaScript:

$('.btn-group[data-toggle=buttons]').each(function (i, e) {
 var default_class = $(e).data('toggle-default-class') || 'btn-default';

 $(e).find('label')
 .click(function () {
 $(e).find('label')
 .each(function (i, e) {
 if ($(e).hasClass('active')) {
 $(e).removeClass($(e).data('toggle-class'))
 .addClass(default_class);
 $(e).find('input')
 .removeAttr('checked');
 } else {
 $(e).removeClass(default_class)
 .addClass($(e).data('toggle-class'));
 $(e).find('input')
 .attr('checked', 1);
 }
 });
 });
});

Он работает, но только когда вы меняете выбор. Если вы нажмете дважды на один выбор, это будет совершенно неверно.

Вот скрипка, чтобы увидеть вопрос: http://jsfiddle.net/Hq78X/1/

Я ищу исправление к этому, и я также открыт для предложений относительно ненавязчивого способа достижения этого. Заранее спасибо!

1 ответ

В надежде, что это помогает кому-то, я немного изменил работу JS:

$('.btn-group[data-toggle=buttons]').each(function (i, e) {
 var default_class = $(e).data('toggle-default-class') || 'btn-default';

 $(e).find('label')
 .click(function (event) {
 $(e).find('label')
 .each(function (i, e) {
 if (!(e == event.target)) {
 $(e).removeClass($(e).data('toggle-class'))
 .addClass(default_class);
 $(e).find('input')
 .removeAttr('checked');
 } else {
 $(e).removeClass(default_class)
 .addClass($(e).data('toggle-class'));
 $(e).find('input')
 .attr('checked', 1);
 }
 });
 });
});

Обновленная скрипка:http://jsfiddle.net/Hq78X/2/

В любом случае, спасибо. :)

licensed under cc by-sa 3.0 with attribution.