jQuery Mobile - 以编程方式更改单选按钮状态

Question

在水平控制组中拥有这些单选按钮：

<div data-role="fieldcontain">
 <fieldset data-role="controlgroup" data-type="horizontal">
   <legend>Geslacht:</legend>
   <input id="gender-male" name="gender" type="radio" value="MALE" />
   <label for="gender-male">Man</label>
   <input id="gender-female" name="gender" type="radio" value="FEMALE" />
   <label for="gender-female">Vrouw</label>
 </fieldset>
</div>

在某个特定的时间点，我希望通过编程方式重置这些值：

$('#gender-male').prop('checked', false)
$('#gender-female').prop('checked', false)

然而，单选按钮的样式没有改变。

例如，如果选择了男性，它仍然显示为选中状态。

我应该做一些刷新吗？

- user1150087

Answer 1

看这个：

$('#gender-male').attr("checked",false).checkboxradio("refresh");

- Sameera Thilakasiri

---

我遇到了类似的问题。当我尝试这个解决方案时，出现了以下错误 - Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'refresh'. 你认为是什么原因导致这个问题？我的控件初始化不正确吗？ - Blake

Answer 2

对于JqueryMobile 1.4，经过测试的工作解决方案如下：

（HTML取自JQM 1.4演示代码）

<form><fieldset data-role="controlgroup">
    <input type="radio" name="radio-choice-v-2" id="radio-choice-v-2a" value="on" checked="checked">
    <label for="radio-choice-v-2a" style="font-weight: 100;">radio button A</label>
    <input type="radio" name="radio-choice-v-2" id="radio-choice-v-2b" value="off">
    <label for="radio-choice-v-2b" style="font-weight: 100;">radio button B</label>
    </fieldset></form>

如上所述，单选按钮A被选中。您想要将单选按钮B设置为选中状态，并将A设置为未选中状态。请注意：checkboxradio("refresh")适用于每个单选按钮。

Javascript/Jquery（取自JQM 1.4 API文档并进行了调整）

    if (radioSetting == 0) {

        $( "#radio-choice-v-2b" ).prop( "checked", false ).checkboxradio( "refresh" );
        $( "#radio-choice-v-2a" ).prop( "checked", true ).checkboxradio( "refresh" );
    } 
    else {
        $( "#radio-choice-v-2a" ).prop( "checked", false ).checkboxradio( "refresh" );
        $( "#radio-choice-v-2b" ).prop( "checked", true ).checkboxradio( "refresh" );
    }

- sasha