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

Question

我在 MDL 中有以下的单选按钮。我想知道如何使用 jQuery 设置其中一个选项。我已经尝试了 Stack Overflow 或者网页上找到的各种方法... 但是没有一种方法是有效的。

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

提前感谢。

- Renaud Tarnec

---

你尝试过 $('sex-option-2').trigger('click'); 吗？ - Steeve Pitis

没有，我还没有尝试过。刚刚尝试了一下，但是没有成功...不管怎样，还是谢谢！ - Renaud Tarnec

Answer 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();

- Matthew

---

你说它不起作用，那么正确的方法是什么，可以让它按预期工作？ - fogx

我在这个答案中提供的方法按预期工作。我的意思是，Renaud T. 提交的先前答案不起作用。 - Matthew

parentNode.MaterialTexfield 中缺少“t”。 - David P

Answer 2

通过借鉴https://github.com/google/material-design-lite/issues/4164的解决方案，我们可以得到以下结果：

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

取消勾选并

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

检查一下

- Renaud Tarnec