Динамическое отключение текстового поля MDL через JavaScript - PullRequest
Новая
       9

Динамическое отключение текстового поля MDL через JavaScript

0 голосов
/ 19 октября 2018

Мне нужно отключить текстовое поле Material Design Lite через JS.Я понимаю, что мне нужно обновить элемент, чтобы MDL обнаруживал изменения.

Я ожидал, что это будет сделано так: 

$element.attr('disabled', 'disabled');
componentHandler.upgradeElement($element);

Но, похоже, это не работает.Я закончил с этим рабочим решением: 

$element.attr('disabled', 'disabled');

let inputWrap = $element.parent();

inputWrap.attr('data-upgraded', '');
inputWrap.attr('class', inputWrap.attr('class').replace(/is-upgraded/g, ''));
inputWrap.attr('class', inputWrap.attr('class').replace(/is-focused/g, ''));

componentHandler.upgradeElement(inputWrap[0]);

Это добилось цели, но я не могу избавиться от ощущения, что я вручную выполняю работу для функции upgradeElement.

Есть ли способдостичь этого с менее решительным подходом?Любая помощь будет высоко ценится.

Ответы [ 2 ]

0 голосов
/ 19 ноября 2018

Простое изменение классов просто изменит его внешний вид, но не отключит кнопку.Точно так же простая установка атрибута disabled отключит его, но не изменит его внешний вид.Правильный метод - использовать встроенные методы disable и enable в MaterialCheckbox.Так что, если это ваш флажок 

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
    <input type="checkbox" id="checkbox-2" class="mdl-checkbox__input">
    <span class="mdl-checkbox__label">Checkbox</span>
</label>

, тогда вы можете отключить его 

document.getElementById("checkbox-2").parentNode.MaterialCheckbox.disable();

, а затем включить его 

document.getElementById("checkbox-2").parentNode.MaterialCheckbox.enable();
0 голосов
/ 19 октября 2018

MDL не выполняет динамическую переоценку входных элементов, когда их значения изменяются программно, и я не нашел хорошего способа попросить его переоценить себя.

Хорошая новость заключается в том, что вы неВам не нужно чистить элемент и снова вызывать componentHandler.upgradeElement (), вам просто нужно добавить или удалить соответствующие классы для элемента, чтобы стиль изменился правильно.

В вашем случае вам просто нужно добавить 'is-disabled 'класс для отключенных элементов и удалить его из тех, которые не отключены: 

if (element.disabled) {
    element.parentNode.classList.add("is-disabled");
} else {
    element.parentNode.classList.remove("is-disabled");
}

Существуют другие классы, такие как' is-readonly '(для полей только для чтения),' is-checked'(для флажков),' is-invalid '(для неверных входных данных) и несколько других.

Для моих проектов, использующих эту библиотеку, я создал небольшую вспомогательную функцию , которая сканировала бывведите поля под элементом и переоцените классы.После динамической загрузки данных я вызываю вспомогательную функцию, и она заботится об исправлении стилей для формы.

Возможно, есть лучший способ сделать это, но я не нашел его.

...