web-dev-qa-db-fra.com

Activer la case à cocher Material Design Lite

J'utilise une case à cocher Material Design Lite et j'essaie de cocher ou de décocher l'élément à l'aide de JavaScript. J'ai essayé ceci:

document.getElementById("checkbox-1").checked = true;

Cela ne fonctionne pas. J'ai essayé la même approche avec jQuery:

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

Cela n'a pas fonctionné non plus. Toute aide serait appréciée.

javascriptmaterial-design-lite
14
Agustín Villalobos

Actuellement, ce composant dans 1.0.0 a un bogue où il n'est pas exposé en tant que widget. Cela a été corrigé. Actuellement en version master et dans un patch 1.0.1 dans quelques jours, il sera disponible pour tous dans une version stable.

C'est la méthode appropriée pour le gérer qui fonctionnera si vous avez une version corrigée:

Pour vérifier l'élément: document.querySelector('.mdl-js-checkbox').MaterialCheckbox.check()

Et pour décocher: document.querySelector('.mdl-js-checkbox').MaterialCheckbox.uncheck()

L’API complète peut actuellement être découverte en consultant le Code source et en affichant les propriétés qui ne se terminent pas par un trait de soulignement. S'ils se terminent par un trait de soulignement, ils sont uniquement destinés à un usage interne et l'utilisation externe n'est pas prise en charge.

Nous travaillons à la documentation de l'API JS, mais cela prendra un peu plus de temps pour terminer et déployer sur le site.

13
Garbee

Pour ceux d'entre nous (tout le monde) qui ont un id ou même une classe sur l'élément <input type="checkbox"> par rapport au parent <label>, l'astuce consiste à exécuter la méthode MDL sur le parent. Sinon, vous obtenez une erreur .MaterialCheckbox is undefined.

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

Donc, par exemple:

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

Si vous utilisez jQuery:

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

Désolé, aucune des solutions fournies ci-dessus ne fonctionnait pour moi à partir de v1.2.1.

C’est ce que j’ai fait et cela fonctionne bien pour moi.

$(".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>

J'espère que ça aide.

1
biojazzard

J'ai trouvé le meilleur moyen de le faire sans entrer dans l'API MDL JS était simplement de cliquer sur le <input type='checkbox'> s'il était coché:

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

Pour mon cas d'utilisation, j'avais deux cases à cocher qui ne devraient jamais être définies, mais ne peuvent avoir aucune des deux, et utilisé les éléments suivants:

$(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');
        }
    });
});
1
Chris Wheeler

Nous avons trouvé une petite solution intéressante qui ré-initialise simplement la classe 'est cochée' sur la balise parent <label>.

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

.addClass () pour définir et refactoriser le code en suite bien sûr.

0
Mike

UPDATE: la réponse suivante est mauvaise pratique (selon l'un des responsables du projet) et une solution est fournie dans la version 1.0.1 corrigée. Je vais encore laisser la réponse ici pour référence future.

la solution suivante est recommandée uniquement si vous mettez à niveau vos éléments DOM vers des composants MDL manuellement (c'est-à-dire var myCheckBox = new MaterialCheckbox(el);).

Le moyen le plus simple que j'ai proposé était d'accéder au composant MDL réel (au lieu de DOM elemnt) **. Donc si votre HTML ressemble à ce qui suit :

<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>

Ensuite, vous auriez quelque chose comme ceci:

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

Les autres méthodes fournies par MaterialCheckbox sont check, disable et enable

** J'ai écrit un article sur le fonctionnement de MDL ici

0
Yan Foto