材料設計のチェックボックスの変更が機能しません

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')); 
} 

私は、コンソールからログインします

は、チェックボックスのいくつかがチェックされます偽 は、私がこれまで持っていることはこれです。問題は、すべてのチェックボックスが視覚的にチェックされていることです。ここでは、チェックボックスの作成のいくつかの例であり、材料設計を使用している：

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

は、ビューを更新します。何か案は？

Answer 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); 
} 

これは、この問題を解決するために可能な限りクリーンな方法ではありません。 MaterialCheckboxオブジェクトは$el.get(0) DOMエレメントにあり、それはcheckとuncheckのメソッドを使用します。

Answer 2

一部のブラウザでは、番号で始まるIDの使用を許可していないブラウザがあります。特に、CSSは数字で始まるセレクタを許可しません。 ＃1チェックボックスを＃checkbox-1に変更してみてください

Answer 3

おそらくJSfiddleを記述してコードを確認してテストする必要があります。その間、Javascriptでチェックボックスの状態を設定しようとしましたか？

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