来自 JavaScript 的 MDL 复选框检查

Question

下面是代码和 fiddle 我正在尝试 un/check 和 MDL checkbox. It's state/UI/Design is not updating upon getting un/check. Have tried ，但没有成功。

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

来自 JavaScript 的 MDL 复选框检查

MDL Checkbox check from JavaScript

jquery

material-design

material-design-lite