Как определить, когда нажата кнопка бездействия в JQM?

Question

Я не совсем понимаю, как работает JQM с radio buttons. У меня есть следующий код:

<fieldset data-type="horizontal" data-role="controlgroup"> 
    <label for="radio-choice-h-2a"> Brands </label> 
    <input name="radio-choice-h-2" id="radio-choice-h-2a" type="radio" checked="checked" class="active" autocomplete="off"> 
    <label for="radio-choice-h-2b"> Stores </label> 
    <input name="radio-choice-h-2" id="radio-choice-h-2b" type="radio" class="" autocomplete="off"> 
</fieldset> 

JQM делает свою магию и добавляет HTML/классы. Результат таков:

<fieldset data-type="horizontal" data-role="controlgroup" class="ui-controlgroup ui-controlgroup-horizontal ui-corner-all"><div class="ui-controlgroup-controls ">     
    <div class="ui-radio"> 
     <label for="radio-choice-h-2a" class="ui-btn ui-corner-all ui-btn-inherit ui-first-child ui-btn-active ui-radio-on"> Brands </label> 
     <input name="radio-choice-h-2" id="radio-choice-h-2a" type="radio" checked="checked" class="active" autocomplete="off" data-cacheval="false"> 
    </div> 
    <div class="ui-radio"> 
     <label for="radio-choice-h-2b" class="ui-btn ui-corner-all ui-btn-inherit ui-last-child ui-radio-off"> Stores </label> 
     <input name="radio-choice-h-2" id="radio-choice-h-2b" type="radio" class="" autocomplete="off" data-cacheval="true"></div> 
    </div> 
</fieldset> 

Я могу добавить логику, когда кнопка изменяет состояние:

$(document).on('change', '#main-search-result .ui-radio', function(){ 
    //Do something 
}); 

Q1: Почему это работает? .ui-radio - это просто DIV и не имеет состояния, такого как радиобуй.

Q2: Как я могу определить, когда бесконтрольно кнопка нажата?

UPDATE

Я обнаружил checkboxradio в API:

var disabled = $("#main-search-result .ui-radio").checkboxradio("option", "disabled"); 

Но я не уверен, если я использую правильный селектор.

Answer 1

Отключено не то же самое, что и неконтролируемое. Отключено, когда вы хотите запретить пользователю изменять состояние кнопки (кнопка недоступна).

jQM использует элемент метки как фактическую кнопку, которую пользователь нажимает. Проверяемые элементы имеют класс ui-btn-active, а у непроверенных предметов этот класс отсутствует. Таким образом, вы можете обнаружить клики на невыбранных элементов, как это:

$(document).on("click", '.ui-radio label:not(.ui-btn-active)', function(e){ 
    alert("unchecked button clicked!"); 
}); 

.ui-radio label:not(.ui-btn-active) означает все ярлыки, которые не имеют ui-btn-active класса, которые находятся в контейнерах, имеющих ui-radio класс.

DEMO

Демонстрация включает в себя только обнаруживать изменения на основных входах радио.