Checkbox not working with materializecss - HTML, CSS

Question

I can't seem to get checkbox to work whilst using the materializecss, as anyone else came cross this issue and managed to fix it?

The library I am using:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

Checkbox without library - https://jsfiddle.net/d2yk4sbv/2/

     <div><label> <input type=checkbox> label 1 </label></div>

Checkbox with library - https://jsfiddle.net/d2yk4sbv/

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
            <div><label> <input type=checkbox> label 1 </label></div>

The checkbox seems to be working fine without the library but the problem is, my application depends on using the materializecss so I can't afford to not use it :(

Link to the materializecss website - http://materializecss.com/

score 19 · Answer 1 · edited Dec 06 '19 at 20:10

19

In v1.0.0, checkbox inside label tag with text wrapped around span will only work.

   <label>
        <input type="checkbox" />
        <span>Red</span>
   </label>

https://github.com/Dogfalo/materialize/issues/1376

 <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    
    
   Checkbox:  <br/>
   
   <label>
           <input type="checkbox" />
           <span></span>
      </label>

edited Dec 06 '19 at 20:10

Legends

21,202
16
97
123

answered Jun 24 '18 at 03:25

Smart Manoj

5,230
4
34
59

2

Good answer for those on 1.0.0 & up. The structure changed since 0.100. – Nyaarium Oct 12 '18 at 23:17
The OP question was about version 0.100.2 – Bernardo Dal Corno Mar 06 '19 at 09:09

score 8 · Accepted Answer · answered Apr 10 '18 at 16:19

8

To be work. It seems like you need to put a relation between the label and the input check. Why don't you try in this way

<div>
  <input type="checkbox" id="check">
  <label for="check">label 1</label>
</div>

http://materializecss.com/forms.html#checkbox

answered Apr 10 '18 at 16:19

Kenry Sanchez

1,703
2
18
24

for materialize 1.0 [see answer](https://stackoverflow.com/a/51006702/2581562) – Legends Dec 06 '19 at 20:13
none of the options work with materialize.css 1.0.0, my checkbox is inside a datatable but the opacity is always 0 and even if i change it so I can see the checkbox I cannot click on it to change the value. really weird – djack109 Apr 26 '23 at 22:33

score 8 · Answer 3 · answered Oct 09 '18 at 18:03

Regular HTML5 checkbox will not showing with materialcss loaded.

this is regular html5 check box.

     <input type="checkbox" name="nameOfChoice" value="1" checked>

As to today 2018, with 1.0, all above answer does not work any more, except this one.

You must follow the label, input, span structure to be work!

credit to @SmartManoj

<label>
    <input type="checkbox" />
    <span>Red</span>
</label>

https://materializecss.com/checkboxes.html

score 1 · Answer 4 · answered Apr 10 '18 at 16:23

it's not working because you have the wrong structure, put the checkbox next to the label and not inside it, and wrap both of them in a p

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<p>
  <input type="checkbox" id="test" checked="checked" />
  <label for="test">Hello</label>
</p>

score 1 · Answer 5 · answered Oct 22 '19 at 18:22

2019 - Version 1.0

I like the concision of Materialize, but it got problems.

Trying to pass checkbox through Ajax.

if(state.success === true) {
                        tbody.append('<tr><th scope="row" style="background-color:' + state['color'] + 
                            '"><label><input type="checkbox" /><span>Red</span></label></th><td>' + state['date'] +
                            '</td><td>' + state['priority'] + '</td><td>' + state['name'] + 
                            '</td><td>' + state['desc'] + '</td><td>' + state['email'] + '</td></tr>'); 
                    }

Had to add this to CSS Style

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: absolute;
    opacity: 1;
    pointer-events: auto;
}

This idea of overwriting common HTML and CSS standards to accomodate their JS is not ideal. I have a site stabilized with materialize, would not do it again.

score 0 · Answer 6 · answered Mar 06 '19 at 10:14

As per version 0.100.2, the solution is to add this CSS class:

.input-field label {
  pointer-events: auto !important;
}

Note that the structure in this version has to be:

<input type="checkbox" id="check">
<label for="check">label 1</label>

Source: https://github.com/Dogfalo/materialize/issues/5062

score 0 · Answer 7 · answered Apr 26 '23 at 22:39

the only way I could even get the checkbox to show, and be clickable was to do this

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: unset;
    opacity: 1;
    pointer-events:all
}

I get no animation but to be honest I don't care I don't have any more time to waste on something the should be simple. None of the solutions above worked for me

score -2 · Answer 8 · answered Apr 15 '20 at 08:20

-2

in version materialize 1.0

in JS 1) find input by document.getElementById... 2) check input.checked

input.checked was be false or true

answered Apr 15 '20 at 08:20

Anton Komarov

11
2

Please add a code snippet as example for the question author. Then your answer will be a lot more useful. – Niek Nijland Apr 15 '20 at 09:54

Checkbox not working with materializecss - HTML, CSS

8 Answers8