Toggle Material Design Lite checkbox

Question

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 1

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.

Answer 2

For those of us (everybody) that have an id or even a class on the <input type="checkbox"> element vs the parent <label>, the trick is to run the MDL method on the parent. Otherwise you get an .MaterialCheckbox is undefined error.

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

So, for example:

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

Answer 3

If you're using jQuery:

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

Answer 4

Sorry, but none of the solutions provided above worked for me as of v1.2.1

This is what I did, and it´s working ok for me.

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

Hope it helps.

Answer 5

I found the best way to do this without getting into the MDL JS API was to just trigger a click on the <input type='checkbox'> if it was checked:

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

For my use case, I had two checkboxes which should never both be set, but can have neither set, and used the following:

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

Answer 6

UPDATE: the following answer is bad practice (according to one of the project maintainers) and a solution is provided in patched version 1.0.1. I will still leave the answer here for future reference.

---

the following solution is recommended only if you are upgrading your DOM elements to MDL components manually (i.e. var myCheckBox = new MaterialCheckbox(el);).

---

The easiest way that I came up with was to get access to the actual MDL component (instead of DOM elemnt)**. So if your HTML looks like the following:

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

Then you would have something like this:

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

Other methods provided by MaterialCheckbox are check, disable, and enable

---

** I have written an article on how MDL works here

Answer 7

Just change this:

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

into this:

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

That worked for me (using material design 1.0.4)

Answer 8

Found a nice little solution that simply re-sets the class 'is-checked' on the parent <label> tag.

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

.addClass() to set and refactor the code to suite of course.