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.

score 16 · Accepted Answer · edited Sep 14 '16 at 11:25

16

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.

edited Sep 14 '16 at 11:25

Finlay Percy

6,763
4
22
28

answered Jul 15 '15 at 01:09

Garbee

10,581
5
38
41

Thank you for the answer. Will wait for the stable version :) – Agustín Villalobos Jul 15 '15 at 15:39
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. https://jsfiddle.net/2835x2zv/2/ – Agustín Villalobos Jul 24 '15 at 19:28
1

You need to target the element you define the js class on. I'll update the example when I'm back at my computer. – Garbee Jul 24 '15 at 19:39
Thank you @Garbee I did that and it works now thank you https://jsfiddle.net/2835x2zv/6/ – Agustín Villalobos Jul 24 '15 at 19:43
@Garbee how to do this in version `1.3.0` ? – Abel Callejo Sep 03 '17 at 08:02
The same method. Nothing has changed here. – Garbee Sep 03 '17 at 14:52

score 10 · Answer 2 · answered Feb 01 '17 at 01:44

10

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

answered Feb 01 '17 at 01:44

Ronnie Royston

16,778
6
77
91

@agustín-villalobos This should be the accepted answer – Serj Sagan Sep 11 '19 at 16:57

krisanalfa · Answer 3 · 2017-02-06T05:13:18.217

4

If you're using jQuery:

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

edited Feb 06 '17 at 05:13

answered Mar 28 '16 at 14:50

krisanalfa

6,268
2
29
38

score 2 · Answer 4 · answered Jun 14 '17 at 10:39

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

score 1 · Answer 5 · answered Sep 27 '16 at 11:22

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.

Thanks :) looking for this kind of 1 liner solution. – Arpit Vasani Nov 22 '16 at 10:55 — Arpit Vasani, Nov 22 '16 at 10:55

score 0 · Answer 6 · edited May 23 '17 at 10:31

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

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.) — Garbee, Jul 15 '15 at 01:06
@Garbee I sure did file a bug: https://github.com/google/material-design-lite/issues/1034 — Yan Foto, Jul 15 '15 at 06:15

score 0 · Answer 7 · edited Sep 18 '15 at 07:54

0

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)

edited Sep 18 '15 at 07:54

Wolf

9,679
7
62
108

answered Sep 18 '15 at 07:42

MrPotato

1
1

Mike · Answer 8 · 2016-03-01T10:17:12.893

0

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.

edited Mar 01 '16 at 10:17

answered Feb 29 '16 at 16:46

Mike

391
4
11

this "hard" manipulation of classNames is definitely not a good practice, you should use component API - .check() as mentioned abowe – Marek Jalovec Jun 27 '16 at 08:49

Toggle Material Design Lite checkbox

8 Answers8

Linked

Related