javascript - Material 设计复选框更改不起作用

Question

我正在尝试将选中的复选框状态动态设置为 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。问题是在视觉上我看到所有的复选框都被选中了。我们正在使用 Material 设计，这里是复选框创建的一些示例:

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

更新 View 。有什么想法吗？

Answer 1

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