jquery - 通过 JavaScript 检查 MDL 复选框

Question

这个问题已经有答案了:

Toggle Material Design Lite checkbox (8 个回答)

已关闭 5 年前。

下面是我试图取消/检查 MDL checkbox 的代码和 fiddle 。 。它的状态/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/

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