javascript 切换 Material Design Lite 复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31413042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle Material Design Lite checkbox
提问by Agustín Villalobos
I'm using a material design lite checkbox and I'm trying to check or uncheck the element using JavaScript. I tried this:
我正在使用 Material Design lite 复选框，我正在尝试使用 JavaScript 选中或取消选中该元素。我试过这个：
document.getElementById("checkbox-1").checked = true;
That do not work. I tried the same approach with jQuery:
那行不通。我用 jQuery 尝试了相同的方法：
$("#checkbox-1").prop('checked',true);
That did not work either. Any help would be appreciated.
那也没有用。任何帮助，将不胜感激。
采纳答案by Garbee
Currently, this component in 1.0.0 has a bug where it is not exposed as a widget. This has been fixed. Currently in master and in a 1.0.1 patch in a few days, it will be available to everyone in a stable build.
目前，1.0.0 中的这个组件有一个错误，它没有作为小部件公开。这已被修复。目前在 master 版本中，几天后在 1.0.1 补丁中，它将在稳定版本中提供给每个人。
This is the proper method to handle it that will work if you have a patched version:
如果您有补丁版本，这是处理它的正确方法：
To check the element:
document.querySelector('.mdl-js-checkbox').MaterialCheckbox.check()
要检查元素：
document.querySelector('.mdl-js-checkbox').MaterialCheckbox.check()
And to uncheck:
document.querySelector('.mdl-js-checkbox').MaterialCheckbox.uncheck()
并取消选中：
document.querySelector('.mdl-js-checkbox').MaterialCheckbox.uncheck()
The full API can be discovered currently by looking at the Source codeand viewing the properties that don't end in an underscore. If they end in an underscore, they are for internal use only and external use is not supported.
目前可以通过查看源代码和查看不以下划线结尾的属性来发现完整的 API 。如果它们以下划线结尾，则它们仅供内部使用，不支持外部使用。
We are working on getting the JS API's documented, but that will take some more time to finish and roll out to the site.
我们正在努力记录 JS API，但这需要更多时间来完成并在网站上推出。
回答by Ronnie Royston
For those of us (everybody) that have an id or even a class on the <input type="checkbox">element vs the parent <label>, the trick is to run the MDL method on the parent. Otherwise you get an .MaterialCheckbox is undefinederror.
对于我们这些（每个人）在<input type="checkbox">元素与父元素上有 id 甚至类的人来说<label>，诀窍是在父元素上运行 MDL 方法。否则你会得到一个.MaterialCheckbox is undefined错误。
.parentElement.MaterialCheckbox.check();
.parentElement.MaterialCheckbox.uncheck();
So, for example:
因此，例如：
var myCheckbox = document.getElementById('my-checkbox');
myCheckbox.parentElement.MaterialCheckbox.check();
回答by krisanalfa
If you're using jQuery:
如果您使用 jQuery：
$('.mdl-js-checkbox').each(function (index, element) {
element.MaterialCheckbox.check();
})
回答by Chris Wheeler
I found the best way to do this without getting into the MDL JS API was to just trigger a click on the <input type='checkbox'>if it was checked:
我发现在不进入 MDL JS API 的情况下执行此操作的最佳方法<input type='checkbox'>是在选中时触发单击：
if ($('#mycheckbox')[0].checked) {
$('#mycheckbox').trigger('click');
}
For my use case, I had two checkboxes which should never both be set, but can have neither set, and used the following:
对于我的用例，我有两个复选框，它们不应该同时设置，但都不能设置，并使用了以下内容：
$(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');
}
});
});
回答by biojazzard
Sorry, but none of the solutions provided above worked for me as of v1.2.1
抱歉，从 v1.2.1 开始，上面提供的任何解决方案都不适合我
This is what I did, and it′s working ok for me.
这就是我所做的，它对我来说工作正常。
$(".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>Hope it helps.
希望能帮助到你。
回答by MrPotato
Just change this:
只需改变这个：
$("#checkbox-1").prop('checked',true);
$("#checkbox-1").prop('checked',true);
into this:
进入这个：
$("#checkbox-1").prop('checked',true).change();
$("#checkbox-1").prop('checked',true).change();
That worked for me (using material design 1.0.4)
这对我有用（使用材料设计 1.0.4）
回答by Mike
Found a nice little solution that simply re-sets the class 'is-checked' on the parent <label> tag.
找到了一个不错的小解决方案，只需在父 <label> 标签上重新设置“已检查”类。
var te = $('#some-checkbox').prop("checked", false).parent();
te.removeClass('is-checked');
.addClass() to set and refactor the code to suite of course.
.addClass() 来设置和重构代码以当然套件。
回答by Yan Foto
UPDATE:the following answer is bad practice(according to one of the project maintainers) and a solution is providedin patched version 1.0.1. I will still leave the answer here for future reference.
更新：以下答案是不好的做法（根据其中一位项目维护者的说法），并且在修补版本 1.0.1 中提供了解决方案。我仍然会在这里留下答案以供将来参考。
the following solution is recommended only if you are upgrading your DOM elements to MDL components manually (i.e. var myCheckBox = new MaterialCheckbox(el);).
仅当您手动将 DOM 元素升级到 MDL 组件时，才推荐使用以下解决方案（即var myCheckBox = new MaterialCheckbox(el);）。
The easiest way that I came up with was to get access to the actual MDL component (instead of DOM elemnt)**. So if your HTML looks like the following:
我想出的最简单的方法是访问实际的 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>
Then you would have something like this:
然后你会有这样的事情：
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();
Other methods provided by MaterialCheckboxare check, disable, and enable
提供的其他方法MaterialCheckbox是check, disable, 和enable
** I have written an article on how MDL works here
** 我在这里写了一篇关于 MDL 如何工作的文章
