Свойство флажка Material Design lite не определено

У меня есть флажок, если он установлен, будет отмечен другой флажок. Я использую материальный дизайн. Установленное свойство флажка блока материала не определено. Как сделать проверенное свойство определенным? Что я делаю неправильно?

Это ссылка, по которой возникает проблема

<script>
$(document).ready(function(){
  $("#exclude_all").change(function(){
    var element_all = document.querySelectorAll('[id = "exclude_all"]');
    var elements = document.querySelectorAll('[id^ = "exclude_dir_"]');
    for(var i=0, n=elements.length; i<n; i++){
      var element = elements[i];
      if ($('#exclude_all').is(":checked")) {
        element.MaterialCheckbox.check();
      } else {
        element.MaterialCheckbox.uncheck();
      }
    }
  });
});
</script>

<!DOCTYPE html>
<html>
<head>
    <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel = "stylesheet" href = "https://code.getmdl.io/1.3.0/material.grey-light_blue.min.css">
<script defer src = "https://code.getmdl.io/1.3.0/material.min.js"></script>

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

</head>
<body>
<ol style = "padding-left:37px;list-style:none;font-size:12px;">
    <li>
        <label id = "label_exclude_all" name = "label_exclude_all" class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for = "exclude_all" style = "margin-left:3px;padding-left:31px;">
        <input type = "checkbox" name = "exclude_all" id = "exclude_all" class = "mdl-checkbox__input" value = "Buscar""">
        <span class = "mdl-checkbox__label" style = "font-size:12px;color:#757575;">Excluir tudo</span>
        </label>
    </li>

    <li>
        <label name = "label_exclude_dir_0" id = "label_exclude_dir_0" class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for = "exclude_dir_0" style = "margin-left:3px;padding-left:31px;">
        <input type = "checkbox" name = "exclude_dir_0" id = "exclude_dir_0" class = "mdl-checkbox__input" value = "Atibaia">
        <span class = "mdl-checkbox__label" style = "font-size:12px;color:#757575;">Atibaia</span>
        </label>
    </li>
</ol>
</body>
</html>

javascript jquery html material-design material-design-lite

23.07.2018 21:30

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

891

Ответы 3

Когда я изменяю это:

element.MaterialCheckbox.check();

К этому:

element.parentNode.MaterialCheckbox.check();

Я думаю, вам нужно сделать метку, а не флажок ввода.

Во всех инструкциях по материальному дизайну Lite, которые я читал, никогда не упоминается, что вам нужно использовать parentNode. Кто-нибудь может объяснить, почему?

Маркос

23.07.2018 23:23

Документация для Material Design Lite API, казалось, так и не была полностью завершена, прежде чем они поместили ее в «ограниченную поддержку» и перешли к Компоненты материалов для Интернета. Вы можете просеять исходный код для флажка MDL, чтобы увидеть, что элемент метки является неотъемлемой частью дисплея и что для этого элемента необходимо вызывать функции флажка MDL.

Ниже приведен рабочий фрагмент, который нацелен на нужные вам элементы без дополнительных действий:

$(document).ready(function() {
  
  // better to add a class to your checkbox labels and update this selector
  const elems = $('[id^=label_exclude_dir_]');
  
  $('#exclude_all').change(function() {
    let checked = $(this).is(':checked');
    elems.each(function() {
      if (checked) {
        this.MaterialCheckbox.check();
      } else {
        this.MaterialCheckbox.uncheck();
      }
      });
  });
  
});

<!DOCTYPE html>
<html>

<head>
  <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel = "stylesheet" href = "https://code.getmdl.io/1.3.0/material.grey-light_blue.min.css">
  <script defer src = "https://code.getmdl.io/1.3.0/material.min.js"></script>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>
  <ol style = "padding-left:37px;list-style:none;font-size:12px;">
    <li>
      <label id = "label_exclude_all" name = "label_exclude_all" class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for = "exclude_all" style = "margin-left:3px;padding-left:31px;">
        <input type = "checkbox" name = "exclude_all" id = "exclude_all" class = "mdl-checkbox__input" value = "Buscar">
        <span class = "mdl-checkbox__label" style = "font-size:12px;color:#757575;">Excluir tudo</span>
      </label>
    </li>

    <li>
      <label name = "label_exclude_dir_0" id = "label_exclude_dir_0" class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for = "exclude_dir_0" style = "margin-left:3px;padding-left:31px;">
        <input type = "checkbox" name = "exclude_dir_0" id = "exclude_dir_0" class = "mdl-checkbox__input" value = "Atibaia">
        <span class = "mdl-checkbox__label" style = "font-size:12px;color:#757575;">Atibaia</span>
      </label>
    </li>
  </ol>
</body>

</html>

Спасибо! Я использовал ваше предложение на своем веб-сайте, и оно сработало.

— 16.08.2018 15:06

Я хочу, чтобы по умолчанию отмечен (отмечен) тот же элемент в документе, готовом. тогда он не работает $ ("# lblchk-Active") [0] .MaterialCheckbox.check (); Затем я использую $ ("# Active"). Attr ("проверено", "проверено"); все еще не работает

— 30.09.2019 19:54

@ Pratik1020 - не видя вашего html, я бы просто догадывался, что происходит. Почему бы не опубликовать вопрос с фрагментом, демонстрирующим вашу проблему?

— 30.09.2019 20:34

10.08.2018 20:36

Это HTML-код Meterial CheckBox Как проверить и снять проверку с помощью JQuery.

<div class = "col-lg-2 col-md-2 col-sm-2 col-xs-12">
   <label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for = "OnAccount">
         <input type = "checkbox" id = "OnAccount" class = "mdl-checkbox__input" />
         <label class = "mdl-checkbox__label">On Account</label>
   </label>
</div>

02.10.2019 11:35

Другие вопросы по теме

Как отключить ссылку на изображениях в системе пользовательского поиска Google cse?

JQuery - динамически отображать и скрывать кнопку при установленном / снятом флажке и наоборот

Как показать div, когда нажата кнопка, а затем прокручена до нее?

JQuery + x-editable: динамический URL-адрес ajax?

Вставьте разрыв строки после маркеров с помощью jQuery и PHP

Привязка сущности к модальному окну

Как сделать текстовое поле частично доступным только для чтения с использованием атрибута Knockoutjs / HTML?

Удалить элемент HTML в родительском элементе HTML

Отображение ключевого слова поиска в div и отображение этого div при загрузке страницы

Отправка значения флажка true, если отмечено, еще false с объектом формы с использованием jQuery в mvc

Свойство флажка Material Design lite не определено

Ответы 3

Другие вопросы по теме

Похожие вопросы