Проверка флажка MDL из JavaScript

Ниже приведен код и скрипка, в которой я пытаюсь отменить/отметить Флажок MDL. Его состояние/пользовательский интерфейс/дизайн не обновляются при снятии/проверке. Пробовали это решение SO, но оно не сработало.

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


material-design jquery material-design-lite
person yogi    schedule 15.02.2016    source источник
comment
$("#MdlCheckBox")[0]; может быть просто ("#MdlCheckBox"); верно?   -  person Guruprasad J Rao    schedule 15.02.2016
comment
@GuruprasadRao [0] необходим для доступа к checked.   -  person yogi    schedule 15.02.2016
comment
Я удивлен, почему вы не попробовали там принятый ответ?   -  person Guruprasad J Rao    schedule 15.02.2016

Ответы (1)


arrow_upward
5
arrow_downward

Вам нужно ориентироваться на метку, а не на ввод. Посмотреть эту скрипту

<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();
  }
});
person smdsgn    schedule 15.02.2016