18

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

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

那是行不通的。我用 jQuery 尝试了同样的方法：

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

那也没有用。任何帮助，将不胜感激。

4

8 回答 8

16

目前，1.0.0 中的这个组件有一个错误，它没有作为小部件公开。这已得到修复。目前在 master 和几天后的 1.0.1 补丁中，它将以稳定的版本提供给每个人。

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

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

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

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

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

于 2015-07-15T01:09:37.680 回答
8

<input type="checkbox">对于我们这些在element 与 parent上具有 id 甚至类的人（每个人），<label>诀窍是在 parent 上运行 MDL 方法。否则你会得到一个.MaterialCheckbox is undefined错误。

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

因此，例如：

var myCheckbox = document.getElementById('my-checkbox');
myCheckbox.parentElement.MaterialCheckbox.check();
于 2017-02-01T01:44:45.580 回答
3

如果您使用 jQuery：

$('.mdl-js-checkbox').each(function (index, element) { 
    element.MaterialCheckbox.check();
})
于 2016-03-28T14:50:22.550 回答
2

我发现在不进入 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');
        }
    });
});
于 2017-06-14T10:39:40.727 回答
1

抱歉，从 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>

希望能帮助到你。

于 2016-09-27T11:22:17.870 回答
0

更新：以下答案是不好的做法（根据项目维护者之一），修补版本 1.0.1中提供了解决方案。我仍然会在这里留下答案以供将来参考。

仅当您手动将 DOM 元素升级为 MDL 组件（即var myCheckBox = new MaterialCheckbox(el);）时，才建议使用以下解决方案。

我想出的最简单的方法是访问实际的 MDL 组件（而不是 DOM 元素）**。因此，如果您的 HTML如下所示：

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

然后你会有这样的事情：

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

提供的其他方法MaterialCheckbox是check、disable和enable

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

于 2015-07-14T20:37:42.157 回答
0

找到了一个很好的小解决方案，它只需在父 <label> 标记上重新设置类“已检查”。

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

.addClass() 当然设置和重构代码套件。

于 2016-02-29T16:46:02.407 回答
0

只需更改此：

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

进入这个：

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

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

于 2015-09-18T07:42:26.923 回答