来自 JavaScript 的 MDL 复选框检查 [重复]答案

【问题标题】：MDL Checkbox check from JavaScript [duplicate]来自 JavaScript 的 MDL 复选框检查 [重复]
【发布时间】：2016-02-15 18:49:21
【问题描述】：

下面是我试图取消/检查 MDL checkbox 的代码和小提琴。它的状态/UI/设计在取消/检查时不会更新。试过this SO solution，没用。

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
    <input id="MdlCheckBox" type="checkbox" class="mdl-checkbox__input" value='0' />
    <span class="mdl-checkbox__label">Check Me</span>
</label>
<input type='button' value='check/uncheck' id='btn' />

$("#btn").click(function() {
    var chk = $("#MdlCheckBox")[0];
    chk.checked = chk.checked ? false : true;
    $(".mdl-checkbox__label").html(chk.checked ? "Check Me (Unchecked)" : "Check Me (Checked)");


    // below is SO solution tried but giving error
    var mdlComp = new MaterialCheckbox(chk);
    mdlComp.check();
});

https://jsfiddle.net/aLfqkL4q/1/

【问题讨论】：

$("#MdlCheckBox")[0]; 可能只是 ("#MdlCheckBox"); 对吧？
需要@GuruprasadRao [0]才能访问checked。
我很惊讶你为什么不在那里尝试接受的答案？

标签： jquery material-design material-design-lite

【解决方案1】：

您需要定位标签，而不是输入。 See this fiddle

<label id="check" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
    <input id="MdlCheckBox" type="checkbox" class="mdl-checkbox__input" value='0' />
    <span class="mdl-checkbox__label">Check Me</span>
</label>
<input type="button" value="test check" id="btn"/>

$("#btn").click(function() {
    if($('#check').is('.is-checked')) {
    document.querySelector('#check').MaterialCheckbox.uncheck();
  }
  else {
    document.querySelector('#check').MaterialCheckbox.check();
  }
});

【讨论】：