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

【问题标题】：Set Material Design Lite radio button option with jquery使用 jquery 设置 Material Design Lite 单选按钮选项
【发布时间】：2016-03-03 21:54:01
【问题描述】：

我在 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

提前致谢。

【问题讨论】：

你试过$('sex-option-2').trigger('click');吗？
不，我没试过。刚试过没有成功...还是谢谢！

标签： jquery material-design-lite

【解决方案1】：

以下是在 MDL 中检查单选按钮的方法：

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

还有一个取消勾选的方法：

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

图标切换：

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

【讨论】：

你说它不起作用，但是让它按预期工作的正确方法是什么？
我在这个答案中给出的方法按预期工作。我的意思是 Renaud T. 之前提交的答案不起作用。
parentNode.MaterialTexfield 中缺少“t”

【解决方案2】：

从https://github.com/google/material-design-lite/issues/4164 获得灵感，解决方案如下：

$('#sex-option-1').parent().removeClass('is-checked');

取消选中和

$('#sex-option-1').parent().addClass('is-checked');

检查

【讨论】：