使用jquery设置Material Design Lite单选按钮选项

Question

我在MDL中有以下单选按钮.我想知道如何使用jquery设置其中一个选项.我尝试过在SO或网络上发现的各种方式....但没有人工作.

<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="sex-option-1">
    <input type="radio" id="sex-option-1" class="mdl-radio__button" name="sex-options" value="1">
    <span class="mdl-radio__label">Male</span>
</label>

<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="sex-option-2">
   <input type="radio" id="sex-option-2" class="mdl-radio__button" name="sex-options" value="2">
   <span class="mdl-radio__label">Female</span>
</label>

MDL版本是1.1.1

提前致谢.

Answer 1

以下是您应该如何检查MDL中的单选按钮:

document.getElementById('sex-option-1').parentNode.MaterialRadio.check();

就其本身而言,我不认为以前的答案确实有效.它只是搞砸了MDL演示而没有实际更改所选的按钮.您必须使用MDL公共方法.

还有一种取消选中的方法:

document.getElementById('sex-option-1').parentNode.MaterialRadio.uncheck();

并且为了进一步参考,因为MDL javascript记录很少,以下是所有其他输入类型的方法:

复选框:

document.getElementById('sex-option-1').parentNode.MaterialCheckbox.check();
document.getElementById('sex-option-1').parentNode.MaterialCheckbox.uncheck();

开关:

document.getElementById('sex-option-1').parentNode.MaterialSwitch.on();
document.getElementById('sex-option-1').parentNode.MaterialSwitch.off();

文本域:

document.getElementById('sex-option-1').parentNode.MaterialTextfield.change('new text');

IconToggle:

document.getElementById('sex-option-1').parentNode.MaterialIconToggle.check();
document.getElementById('sex-option-1').parentNode.MaterialIconToggle.uncheck();