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

时间:2012-02-09 10:58:21

标签: javascript jquery jquery-mobile

将此单选按钮放在水平控制组中:

<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)

然而,单选按钮的样式不会改变。

E.g。 MALE被选中后仍然会被选中。

我应该做些什么刷新吗?

2 个答案:

答案 0 :(得分:18)

看看这个:

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

答案 1 :(得分:0)

对于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(“刷新”)适用于每个单选按钮。

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" );
    }