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

Question

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

Старая конвенция была объявить <div class="btn-group">, окружавший ряд <button>-х, и окружающие ДИВЫ также имели 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 этого, по-видимому, неполна, по крайней мере в моих глазах - - объяснение). Скажем, я хотел бы настроить слушателя на второй этикетке флажок кнопки// и определить, является ли или не активен/проверяется кнопку/метка/Флажок - я создал следующий код:

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

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

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

Я думал, что нашел решение, зарегистрировав обработчик .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> «S для радио или группы кнопок флажка, необходимо принять различные меры для извлечения и изменения некоторых свойств кнопок «faux». В моем случае, я хотел бы, чтобы отключить/включить кнопки на основе различных данных, вводимого пользователя, но установка disabled свойства флажка не работает:

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

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

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

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

Answer 1

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

Все, что вам нужно сделать, это установить события для первоначального ввода и проверить состояние этого первоначального ввода

$('label > input[type=checkbox]').on('change', function() { 
    console.log($(this).is(':checked')); 
}); 

DEMO: http://jsfiddle.net/qq816po7/1/