切换 Material Design Lite 复选框

Question

我正在使用 material design lite 复选框，我正在尝试使用 JavaScript 来选中或取消选中该元素。我试过这个：

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

那不行。我用 jQuery:

尝试了相同的方法

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

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

Answer 1

更新：以下答案是不好的做法（根据其中一位项目维护者的说法），解决方案是在补丁版本 1.0.1 中。我还是会在这里留下答案，以供日后参考。

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

我想到的最简单的方法是访问实际的 MDL 组件（而不是 DOM 元素）**。所以如果你的 HTML 看起来像 the following:

<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 工作原理的文章 here

Answer 2

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

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

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

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

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

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

Answer 3

只要改变这个：

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

进入这个：

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

这对我有用（使用 material 设计 1.0.4）

Answer 4

找到一个不错的小解决方案，只需重新设置父标签上的 class 'is-checked'。

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

.addClass() 设置和重构代码以适应当然。

Answer 5

如果您正在使用 jQuery：

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

Answer 6

抱歉，从 v1.2.1 开始，none 以上提供的解决方案对我有效

这就是我所做的，对我来说效果很好。

$(".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 7

对于我们这些（每个人）在 <input type="checkbox"> 元素和父元素 <label> 上有一个 id 甚至 class 的人来说，诀窍是运行父级的 MDL 方法。否则你会得到一个 .MaterialCheckbox is undefined 错误。

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

因此，例如：

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

Answer 8

我发现在不进入 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');
        }
    });
});

切换 Material Design Lite 复选框

Toggle Material Design Lite checkbox

javascript

material-design-lite