材料设计复选框更改不起作用答案

【问题标题】：Material design checkbox change doesn't work材料设计复选框更改不起作用
【发布时间】：2017-02-01 21:08:35
【问题描述】：

我正在尝试将选中的复选框状态动态设置为 false/true。我到目前为止是这样的：

for(var i = 0; i < bookmakers.length; i++) {
    $('#' + bookmakers[i].id + '-checkbox').prop('checked', filters['bookmakers'][bookmakers[i].id]).change();
    console.log($('#' + bookmakers[i].id + '-checkbox'));
}

当我从控制台获取日志时，一些复选框被选中：true 和一些选中：false。问题是我在视觉上看到所有复选框都被选中。我们正在使用材料设计，这里是创建复选框的一些示例：

for(var i = 0; i < bookmakers.length; i++) {
    $bookmakers.append('<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect"><input id="' + bookmakers[i].id + '-checkbox" type="checkbox" class="mdl-switch__input" checked><span class="mdl-switch__label">' + bookmakers[i].name + '</span></label>');
}

然后我这样做：

if(typeof componentHandler != 'undefined')
    componentHandler.upgradeDom();

更新视图。有什么想法吗？

【问题讨论】：

标签： javascript jquery checkbox material-design

【解决方案1】：

有多种方法可以解决这个问题。我用过的一个是这样的：

for(var i = 0; i < bookmakers.length; i++) {
    setCheckboxValue($('#' + bookmakers[i].id + '-checkbox'), filters['bookmakers'][bookmakers[i].id]);
}

然后setCheckboxValue 函数看起来像这样：

function setCheckboxValue($el, value) {
    var $parent = $el.prop('checked', value).parent();
    removeOrAddClass($parent, 'is-checked', value);
}

这不是解决此问题的最简洁的方法。您可以在 $el.get(0) DOM 元素中找到 MaterialCheckbox 对象并使用它的 check 和 uncheck 方法。

【讨论】：

【解决方案2】：

也许您应该编写一个 JSfiddle，以便我们可以查看和测试您的代码。同时，您是否尝试过使用 Javascript 设置复选框状态？

document.getElementById('yourElemID').checked = true; // or false

【讨论】：

我通过将父类更改为 is-checked 解决了这个问题 - 或者没有。
您应该更新自己的答案，以便其他有类似问题的人可以更轻松地找到它。很高兴你找到了办法。

【解决方案3】：

某些浏览器不允许 id 以数字开头。特别是 CSS 不允许选择器以数字开头。尝试将#1-checkbox 更改为#checkbox-1

【讨论】：

但是 bookmakers[i].id 不是数字，而是字符串
过滤器数组包含什么？过滤器['bookmakers'][bookmakers[i].id]
过滤器包含每个博彩公司，如果该博彩公司的复选框被选中或未选中 {true/false}