Toggle Material Design Lite checkbox

javascript material-design-lite
Agustín Villalobos picture Agustín Villalobos · Jul 14, 2015 · Viewed 17.3k times · Source

I'm using a material design lite checkbox and I'm trying to check or uncheck the element using JavaScript. I tried this:

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

That do not work. I tried the same approach with jQuery:

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

That did not work either. Any help would be appreciated.

Answer

Garbee picture Garbee · Jul 15, 2015

Currently, this component in 1.0.0 has a bug where it is not exposed as a widget. This has been fixed. Currently in master and in a 1.0.1 patch in a few days, it will be available to everyone in a stable build.

This is the proper method to handle it that will work if you have a patched version:

To check the element: document.querySelector('.mdl-js-checkbox').MaterialCheckbox.check()

And to uncheck: document.querySelector('.mdl-js-checkbox').MaterialCheckbox.uncheck()

The full API can be discovered currently by looking at the Source code and viewing the properties that don't end in an underscore. If they end in an underscore, they are for internal use only and external use is not supported.

We are working on getting the JS API's documented, but that will take some more time to finish and roll out to the site.

Related questions

Material Design Lite Integration with AngularJS

I am aware of Angular Material which helps implement Material Design specification for use in Angular single-page applications. I'm however taking a look at Material Design Lite alternative to integrate with my Angular project. I will like to know the …

Read More
How to hide drawer upon user click

How do I hide the drawer when the user clicks on an item? Or when a button is clicked? <div class="mdl-layout__drawer"> <span class="mdl-layout-title">Title</span> <button class="mdl-button mdl-js-button mdl-button--fab …

Read More
How can I remove a specific item from an array?

I have an array of numbers and I'm using the .push() method to add elements to it. Is there a simple way to remove a specific element from an array? I'm looking for the equivalent of something like: array.remove(…

Read More