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，并且没有像radiobutton这样的状态。

Q2：如何检测点击未选中按钮的时间？

更新

我在API中发现了checkboxradio：

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

但我不确定我是否使用了正确的选择器。

Answer 1

禁用与未选中不同。禁用是指您希望阻止用户更改按钮的状态（按钮显示为灰色）。

jQM使用label元素作为用户点击的实际按钮。已检查的项目具有类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

演示包括仅检测底层无线电输入的变化。

如何检测JQM中何时单击非活动按钮？

1 个答案: