材料設計複選框更改不起作用

我試圖動態地將複選框狀態選中爲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和一些檢查：假的。問題是，我可以看到所有複選框被選中。我們使用的材料的設計，這裏是複選框創作的一些例子：

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

更新視圖。有任何想法嗎？

來源

2016-09-23 durisvk

解決這個問題有多種方式。一個我用的是：

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方法。

來源

2016-09-28 12:38:32 durisvk

某些瀏覽器不允許id以數字開頭。特別是CSS不允許以數字開頭的選擇器。嘗試將＃1複選框更改爲＃複選框1

來源

2016-09-23 22:32:46

但是博彩公司[i] .id不是數字，它是字符串 – durisvk

過濾器數組包含什麼？過濾器['博彩公司'] [博彩公司] [i] .id] –

過濾器包含每個博彩公司，如果這個博彩公司的複選框被選中或取消選中{true/false} – durisvk

也許你應該寫一個JSfiddle，以便我們可以看到並測試你的代碼。與此同時，你有沒有嘗試用Javascript設置複選框狀態？

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

來源

2016-09-27 18:54:05

我通過更改父項的等級來解決它 - 沒有。 – durisvk

然後，您應該更新自己的答案，以便其他具有類似問題的人可以更輕鬆地找到答案。很高興你找到了一個方法。 –

材料設計複選框更改不起作用

回答

相關問題