Отключение тумблера Material Design Lite

Я пытаюсь создать некоторые элементы на странице с помощью JavaScript и оформить их с помощью нового Material Design Lite. Все работает до тех пор, пока я не попытаюсь начать отключать элементы программно после того, как элементы будут созданы.

У меня есть несколько тумблеров (созданных JavaScript). Когда один включается, я хочу, чтобы другие были отключены.

Если я использую:

toggle2.disabled = true;

он отлично работает и отключен, но как только я попробую это сделать так:

setInterval(function(){ 

if (toggle1.checked == true) {
    toggle2.disabled = true;
} else {
    toggle2.disabled = false;
}

}, 1000);

toggle2 визуально все еще активен, эффект пульсации работает, но он не включается, поэтому он отключен в фоновом режиме, но не визуально.

Вот пример JSFiddle (использует элементы HTML, но то же самое происходит с моими элементами, созданными JS)

Кроме того, вот видео о проблеме . В нем третий вниз отключается toggle3.disabled = true;, а четвертый отключается оператором IF на основе состояния второго неработающего.

Я не знаю, то ли я делаю что-то не так, то ли это ошибка самого MDL.

Спасибо


javascript material-design-lite
person SS113    schedule 09.07.2015    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вам нужно запросить элемент, а затем вызвать для него MaterialCheckbox.disable(). Вот так:

document.querySelector('#my-checkbox').MaterialCheckbox.disable()

Disable — это метод, предоставляемый компонентом флажка (реализованным как виджет), поэтому все, что необходимо внутри со всеми созданными дополнительными элементами, обрабатывается должным образом.

person Garbee    schedule 13.07.2015
comment
Спасибо за помощь, Гарби, хотя при этом я получаю Uncaught TypeError: Cannot read property 'disable' of undefined. См. jsfiddle.net/6hydumc8. - person SS113; 13.07.2015
comment
Упс, мы охренели. Мы исправим это в следующем патче. В версии 1.0 мы не отображали флажок как виджет. Очень жаль, патч должен быть в мастере сегодня для тега 1.0.1, который, надеюсь, будет сделан в пятницу. - person Garbee; 13.07.2015
comment
О, @ SS113, еще одно предупреждение: вы ориентируетесь не на сам ввод, а на элемент, для которого вы определяете триггер js, в данном случае на метку. jsfiddle.net/tpbpr9gt это обновленная скрипта, которая будет работать сразу после установки патча. - person Garbee; 13.07.2015
comment
Спасибо за помощь и за обновление патча! - person SS113; 13.07.2015

arrow_upward
0
arrow_downward

Просто добавьте disabled HTML-атрибут к себе <input>:

<input type="checkbox" id="toggle2" class="mdl-switch__input" disabled="disabled" />

Твоя попытка сделать это была неправильной. Нет отключенного свойства объекта. Вы должны установить его с помощью JQuery следующим образом:

$('input#toggle2').attr('disabled', 'disabled');

Я обновил ваш JSFiddle.

Вам не нужно использовать SetInterval. Просто подпишитесь на change событие #toggle1.

person Vladimir Serykh    schedule 09.07.2015
comment
Только что попробовал, эффект тот же. Отключено, но визуально нет, и пульсация все еще работает и не переходит в положение ON. jsfiddle.net/gvgs2p9d - person SS113; 09.07.2015
comment
Кроме того, toggle2.disabled = true; отлично работает, если его нет в операторе IF: goo.gl/RGnCzU - person SS113; 09.07.2015
comment
@ SS113 Странно, но у меня это не работает в вашем JSFiddle. - person Vladimir Serykh; 09.07.2015
comment
Правильно, вот почему я сбит с толку, почему он выглядит серым и неактивным при использовании toggle2.disabled = true; сам по себе, но любой другой способ (ваш или мой) создает визуально активный переключатель, который имеет волновой эффект, но не может скользить. Спасибо за помощь! - person SS113; 09.07.2015