Twitter Bootstrap получение состояния группы кнопок

Есть несколько вопросов, связанных с радиостанциями и блоками кнопок Twitter Bootstrap, но ни один из них не соответствует новому соглашению Bootstrap (я использую v3.3.4) или адресую свой вопрос.

Старое соглашение состояло в том, чтобы объявить <div class="btn-group">, который окружил несколько <button>, а у окружающего div также был атрибут data-toggle для buttons-checkbox или buttons-radio, чтобы выглядеть примерно так:

<div class="btn-group" data-toggle="buttons-checkbox">
    <button type="button" class="btn btn-primary">Btn 1</button>
    <button type="button" class="btn btn-primary">Btn 2</button>
    <button type="button" class="btn btn-primary">Btn 3</button>
</div>

Однако соглашение о создании этих групп изменилось, как видно на странице Bootstrap Javascript для кнопок (http://getbootstrap.com/javascript/#buttons-checkbox-radio):

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

Как вы можете видеть, теперь кнопки теперь имеют метки с дочерними полями ввода типа checkbox или radio, которые выглядят как кнопки.

Я хотел бы настроить событие .on('click'), которое фиксирует состояние кнопки, которая только что нажата, однако логика, которая следует за ней, странно обратная (и реализация Javascript этого, по-видимому, неполна, по крайней мере, в моих глазах - объяснение). Скажем, я бы хотел настроить прослушиватель для второй метки /checkbox/button и определить, активна ли/отмечена кнопка/флажок/кнопка/я установил следующий код:

$('#label2').on('click', function(){
  console.log($(this).hasClass('active'));
});

Я ожидаю, что приведенный выше код будет, когда кнопка была нажата, чтобы "активировать" кнопку label/checkbox/, чтобы напечатать true на консоли. Он выводит false. Это происходит потому, что прослушиватель .on('click') запускается до изменения состояния кнопки, и поэтому мне придется инвертировать логику для любых действий, которые я хотел бы принять на основе состояния кнопки. Кажется, обратное мне. (Иллюстрация jsFiddle: http://jsfiddle.net/mmuelle4/qq816po7/)

Есть и другие библиотеки, которые поймают этот "разумный" способ, например, библиотеку Bootstrap Switch (http://www.bootstrap-switch.org/). Библиотека Bootstrap Switch имеет событие switchChanged, которое ловит изменение переключателя после щелчка, но предоставляет состояние кнопки/флажка после щелчка.

Я думал, что нашел решение, зарегистрировав обработчик .on('change'), а не обработчик .on('click'), но я получил тот же результат.

Кроме того, если щелкнуть <label>, вложенный <checkbox> никогда не устанавливает/не передает свойство checked - c'mon Bootstrap! Почему даже использовать флажок, если состояние инертное? Похоже на довольно ясный случай несогласованности, когда <label> может иметь класс active, но <checkbox> не имеет атрибута checked... (это то, что я имел в виду ранее, когда я сказал, что Javascript реализация этого, по-видимому, неполна)

На данный момент мне просто нужно инвертировать логику в моем обработчике, но это просто раздражает меня. В целом, я думаю, мой вопрос: Кто-нибудь испытал это и нашел лучшее решение (все еще просто используя jQuery и Bootstrap, нет альтернативных библиотек), которые не требуют инвертированной логики?

EDIT. Ниже приведено решение, но мой комментарий о <checkbox>, не имеющий атрибута checked, породил несколько другой вопрос/обсуждение. Можно выполнить запрос .is(':checked') на вложенном <checkbox>, чтобы получить правильное состояние в обработчике .on('change'), но если вы проверите DOM, этот атрибут никогда не будет установлен на <checkbox>. Меня беспокоит, что DOM не отражает состояние, которое я получаю с запросом .is(':checked')...

EDIT2. Еще одна странная причуда, которую я обнаружил, заключается в том, что с отъездом с помощью <button> для группы радио или группы флажков необходимо принять различные меры для извлечения и изменения некоторых из свойства кнопок "faux". В моем случае я хотел бы отключить/включить кнопки на основе различных пользовательских входов, но установка свойства disabled этого флажка не работает:

$('input').prop('disabled', true) //Doesn't render the button disabled

Это потому, что кнопка теперь фактически является <input>, содержащейся в <label>, которая написана как кнопка, поэтому теперь disabled необходимо установить на <label>. Это немного расстраивает, но не слишком сложно сделать с помощью метода jQuery .parent() (потому что я сохраняю указатель на ввод). Недовольство вызывает тот факт, что в случае кнопки я могу использовать метод .prop('disabled', true/false) для изменения свойства disabled, , но я не могу сделать то же самое, потому что теперь это <label>.

Это описано в документации jQuery attr (http://api.jquery.com/attr/), "Чтобы получить и изменить свойства DOM, такие как отмеченные, выбранные, или отключенное состояние элементов формы, используйте метод .prop()." A <button>, по-видимому, является элементом формы, тогда как a <label> не является (хотя я бы подумал, что это будет так). Теперь в моем коде я должен сознательно не забывать использовать .prop('disabled', true/false) для реальных кнопок и .attr('disabled', true/false) для кнопок faux. Я бы хотел, чтобы Bootstrap рассуждал о том, чтобы уйти с обычных кнопок... (и, возможно, так, что такие вещи, как .is(':checked'), могут работать, но это обязательно делает для некоторых других головных болей...)

EDIT3. Просто узнал, что после "нового соглашения" использования <input>, завернутого в <label>, не требуется. Вы все равно можете использовать кнопку, и ожидается, что будет происходить радио /checkbox... так много головной боли для ничего. Почему бы вам не показать оба варианта, Bootstrap???

Ответ 1