用jquery设置材料设计Lite单选按钮选项

Question

我在MDL中有以下单选按钮。我想知道如何使用jquery设置其中一个选项。我试过在网上或网上找到各种方法.但没人在工作。

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

还有一种未检查的方法：

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

Textfield：

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

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

检查