Checkbox Änderung des Materialdesigns funktioniert nicht

Question

Ich versuche, den Checkbox-Status dynamisch auf false/true zu setzen. Was ich bisher habe, ist dies:

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

Wenn ich von der Konsole anmelden erhalten, sind einige der Kontrollkästchen aktiviert: true und einige überprüft: false. Das Problem ist, dass ich optisch alle Kontrollkästchen markiert sehe. Wir verwenden Material-Design, hier einige Beispiele für die Checkbox Schöpfung:

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

und dann macht mir das:

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

Ansicht zu aktualisieren. Irgendwelche Ideen?

Answer 1

Es gibt mehrere Möglichkeiten, dieses Problem zu lösen. Eine, die ich verwendet habe, ist dies:

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

Dies ist nicht der sauberste Weg, dieses Problem zu lösen:

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

und dann setCheckboxValue Funktion sieht wie folgt aus. Sie können ein MaterialCheckbox Objekt in $el.get(0) DOM Element finden und es check und uncheck Methoden verwenden.

Answer 2

Einige Browser erlauben keine IDs, die mit einer Nummer beginnen. Insbesondere erlaubt CSS keine Selektoren, die mit einer Zahl beginnen. Versuchen Sie das # 1-Kontrollkästchen zu # checkbox-1 zu ändern

Answer 3

Vielleicht sollten Sie eine JSfiddle schreiben, damit wir Ihren Code sehen und testen können. Haben Sie in der Zwischenzeit versucht, den Checkbox-Status mit Javascript zu setzen?

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