Переключить флажок Material Design Lite

Ответ 1

В настоящее время этот компонент в 1.0.0 имеет ошибку, в которой он не отображается как виджет. Это было исправлено. В настоящее время в мастер и в патче 1.0.1 через несколько дней он будет доступен для всех в стабильной сборке.

Это правильный метод обработки, который будет работать, если у вас есть исправленная версия:

Чтобы проверить элемент: document.querySelector('.mdl-js-checkbox').MaterialCheckbox.check()

И снимите флажок: document.querySelector('.mdl-js-checkbox').MaterialCheckbox.uncheck()

Полный API можно найти в настоящее время, посмотрев Исходный код и просмотрев свойства, которые не заканчиваются подчеркиванием. Если они заканчиваются знаком подчеркивания, они предназначены только для внутреннего использования, а внешнее использование не поддерживается.

Мы работаем над документированием JS API, но для завершения и развертывания на сайте потребуется еще немного времени.

Ответ 2

Для тех из нас (всех), у которых есть идентификатор или даже класс в элементе <input type="checkbox"> vs parent <label>, трюк заключается в том, чтобы запустить метод MDL для родителя. В противном случае вы получите ошибку .MaterialCheckbox is undefined.

.parentElement.MaterialCheckbox.check();
.parentElement.MaterialCheckbox.uncheck();

Итак, например:

var myCheckbox = document.getElementById('my-checkbox');
myCheckbox.parentElement.MaterialCheckbox.check();

Ответ 3

Если вы используете jQuery:

$('.mdl-js-checkbox').each(function (index, element) { 
    element.MaterialCheckbox.check();
})

Ответ 4

Извините, но ни одно из приведенных выше решений не работало для меня с версии 1.2.1.

Это то, что я сделал, и он работает нормально для меня.

$(".mdl-checkbox").on("change", function() {
  if ($(this).hasClass("is-checked")) {
    return $(this).children().first().attr("checked", true);
  } else {
    return $(this).children().first().removeAttr("checked");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ответ 5

Я нашел лучший способ сделать это, не входя в MDL JS API, чтобы просто вызвать щелчок на <input type='checkbox'>, если он был проверен:

if ($('#mycheckbox')[0].checked) {                                      
    $('#mycheckbox').trigger('click');
}

В моем случае использования у меня было два флажка, которые никогда не должны устанавливаться, но не могут быть установлены, и использовали следующее:

$(function() {
    $(document).on('change', '#mycheckbox1', function() {
        if(this.checked && $('#mycheckbox2')[0].checked) {
            $('#mycheckbox2').trigger('click');
        }
    });
    $(document).on('change', '#mycheckbox2', function() {
        if(this.checked && $('#mycheckbox1')[0].checked) {
            $('#mycheckbox1').trigger('click');
        }
    });
});

Ответ 6

ОБНОВЛЕНИЕ: следующий ответ - плохая практика (по словам одного из разработчиков проекта), а решение предоставлено в исправленной версии 1.0 0,1. Я буду оставлять ответ здесь для справок в будущем.

следующее решение рекомендуется только в том случае, если вы вручную обновляете свои элементы DOM до компонентов MDL (т.е. var myCheckBox = new MaterialCheckbox(el);).

Самый простой способ, с которым я столкнулся, - получить доступ к фактическому компоненту MDL (вместо DOM elemnt) **. Поэтому, если ваш HTML выглядит как следующее:

<label class="my-checkbox" for="checkbox-1">
  <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked />
  <span class="mdl-checkbox__label">Checkbox</span>
</label>

Тогда у вас будет что-то вроде этого:

var domEl = document.getElementById("my-checkbox")
var mdlComp = new MaterialCheckbox(domEl)

// now you can just use the functions provided by the MDL component
mdlComp.uncheck();

Другие методы, предоставляемые MaterialCheckbox: check, disable и enable

** Я написал статью о том, как MDL работает здесь

Ответ 7

Просто измените это:

$("#checkbox-1").prop('checked',true);

в это:

$("#checkbox-1").prop('checked',true).change();

Это сработало для меня (используя конструкцию материалов 1.0.4)

Ответ 8

Нашел небольшое небольшое решение, которое просто переустанавливает класс "проверено" на родительском <label> тег.

var te = $('#some-checkbox').prop("checked", false).parent();
te.removeClass('is-checked');

.addClass(), чтобы установить и реорганизовать код в набор, конечно.