Checkbox not working with materializecss - HTML, CSS

问题

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/

回答1:

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

回答2:

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>

回答3:

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

回答4:

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>

回答5:

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

回答6:

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.

来源：https://stackoverflow.com/questions/49758284/checkbox-not-working-with-materializecss-html-css

标签

html

css

checkbox

materialize