Toggle Material Design Lite checkbox

17,679

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

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

Solution 3

If you're using jQuery:

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

Solution 4

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

Solution 5

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.

Share:
17,679

Related videos on Youtube

Agustín Villalobos
Author by

Agustín Villalobos

Updated on June 14, 2022

Comments

  • Agustín Villalobos
    Agustín Villalobos over 1 year

    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.

  • Garbee
    Garbee over 8 years
    To be clear, this is bad practice. It may provide you with access to object methods the component developers did not intend for you to have access to. You should ALWAYS use the component handler. If you need access to something and you don't, then file a bug with the component and use-case. We may have accidentally not exposed an internal component as a widget or may have simply not thought of a given use-case where widgetizing a component was needed (which can be changed.)
  • Yan Foto
    Yan Foto over 8 years
  • Agustín Villalobos
    Agustín Villalobos over 8 years
    Thank you for the answer. Will wait for the stable version :)
  • Agustín Villalobos
    Agustín Villalobos over 8 years
    Hello the update came out and I tried however It did not work I have created a fiddle here to test as you can see is not working. jsfiddle.net/2835x2zv/2
  • Garbee
    Garbee over 8 years
    You need to target the element you define the js class on. I'll update the example when I'm back at my computer.
  • Agustín Villalobos
    Agustín Villalobos over 8 years
    Thank you @Garbee I did that and it works now thank you jsfiddle.net/2835x2zv/6
  • Marek Jalovec
    Marek Jalovec over 7 years
    this "hard" manipulation of classNames is definitely not a good practice, you should use component API - .check() as mentioned abowe
  • Arpit Vasani
    Arpit Vasani about 7 years
    Thanks :) looking for this kind of 1 liner solution.
  • Abel Callejo
    Abel Callejo over 6 years
    @Garbee how to do this in version 1.3.0 ?
  • Garbee
    Garbee over 6 years
    The same method. Nothing has changed here.
  • Serj Sagan
    Serj Sagan over 4 years
    @agustín-villalobos This should be the accepted answer