Question

我正在使用材料设计精简版复选框，并且我尝试使用JavaScript检查或取消选中该元素。我试过这个：

document.getElementById("checkbox-1").checked = true;

那不起作用。我尝试了与jQuery相同的方法：

$("#checkbox-1").prop('checked',true);

这也不起作用。任何帮助将不胜感激。

Answer 1

目前，1.0.0中的此组件存在一个错误，它不会作为窗口小部件公开。这已得到修复。目前在主数据库和几天内的1.0.1补丁程序中，它将以稳定版本的形式提供给所有人。

如果您有修补版本，这是处理它的正确方法：

要检查元素： document.querySelector('.mdl-js-checkbox').MaterialCheckbox.check()

取消选中： document.querySelector('.mdl-js-checkbox').MaterialCheckbox.uncheck()

目前可以通过查看Source code并查看未以下划线结尾的属性来发现完整的API。如果它们以下划线结尾，则仅供内部使用，不支持外部使用。

我们正在努力记录JS API，但这需要更多时间才能完成并推广到网站。

Answer 2

对于那些在<input type="checkbox">元素与父<label>上具有id或甚至类的人（每个人），诀窍是在父级上运行MDL方法。否则会出现.MaterialCheckbox is undefined错误。

.parentElement.MaterialCheckbox.check();
.parentElement.MaterialCheckbox.uncheck();

所以，例如：

var myCheckbox = document.getElementById('my-checkbox');
myCheckbox.parentElement.MaterialCheckbox.check();

Answer 3

如果你正在使用jQuery：

$('.mdl-js-checkbox').each(function (index, element) { 
    element.MaterialCheckbox.check();
})

Answer 4

很抱歉，但截至v1.2.1

，上面提供的解决方案都不适用于我

这就是我所做的，而且对我来说也很合适。

$(".mdl-checkbox").on("change", function() {
  if ($(this).hasClass("is-checked")) {
    return $(this).children().first().attr("checked", true);
  } else {
    return $(this).children().first().removeAttr("checked");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

希望它有所帮助。

Answer 5

我发现在不进入MDL JS API的情况下执行此操作的最佳方法是，如果选中<input type='checkbox'>，则只触发if ($('#mycheckbox')[0].checked) { $('#mycheckbox').trigger('click'); }点击：

$(function() {
    $(document).on('change', '#mycheckbox1', function() {
        if(this.checked && $('#mycheckbox2')[0].checked) {
            $('#mycheckbox2').trigger('click');
        }
    });
    $(document).on('change', '#mycheckbox2', function() {
        if(this.checked && $('#mycheckbox1')[0].checked) {
            $('#mycheckbox1').trigger('click');
        }
    });
});

对于我的用例，我有两个复选框，它们都不应该都设置，但既没有设置，又使用了以下内容：

initial begin
    mem[0] = 1;
    mem[1] = mem[0];
end

Answer 6

更新：以下答案是不良做法（根据项目维护人员之一），并且修补版本1.0.1中的解决方案为provided。我仍然会留下答案，以备将来参考。

仅当您手动将DOM元素升级为MDL组件（即<label class="my-checkbox" for="checkbox-1"> <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked /> <span class="mdl-checkbox__label">Checkbox</span> </label>）时，才建议使用以下解决方案。

我想出的最简单的方法是访问实际的MDL组件（而不是DOM elemnt）**。因此，如果您的HTML看起来像the following：

var domEl = document.getElementById("my-checkbox")
var mdlComp = new MaterialCheckbox(domEl)

// now you can just use the functions provided by the MDL component
mdlComp.uncheck();

然后你会有这样的事情：

check

MaterialCheckbox提供的其他方法包括disable，enable和git remote show origin

**我写了一篇关于MDL如何工作的文章here

Answer 7

只需改变一下：

$("#checkbox-1").prop('checked',true);

进入这个：

$("#checkbox-1").prop('checked',true).change();

这对我有用（使用材料设计1.0.4）

Answer 8

找到一个很好的小解决方案，只需在父级＆lt; label＆gt;上重新设置“is-checked”类。标签

var te = $('#some-checkbox').prop("checked", false).parent();
te.removeClass('is-checked');

.addClass（）用于设置代码并将其重构为套件。

切换Material Design Lite复选框

8 个答案: