Materialize: problem ith checkboxes & radios when <label> is before the <input>

[aristath]

the elements only work if out HTML looks like this:

<form>
  <input>
  <label></label>
</form>

However usually we see CMSs and apps using a structure like this:

<form>
  <label></label>
  <input>
</form>

or even this:

<form>
  <label>
    <input>
  </label>
</form>

Currently these elements only work in Materialize if the <label> element is after the <input>

[acburst]

This is just a limitation of css's sibling selector. We don't have any changes planned at this moment

[erichschroeter]

Is there any known workaround?

[erichschroeter]

Well, for those that come across this still wondering if there's a workaround, I think I found one. Just include jquery and include the following snippet.

<script>
/* Fix bug where materializecss checkboxes only render if before labels. */
$.each($(':checkbox'), function(k, v) {
    var label = $(this).closest('label');
    $(this).insertBefore(label);
});
</script>

[gvankeerberghen]

This slightly more robust version of @erichschroeter's workaround did the trick for me:

$.each($(':checkbox'), function(k, v) { var label = $('label[for="' + this.id + '"]'); $(this).insertBefore(label); });

[Yasser-L]

Thank you @erichschroeter (and @gvankeerberghen ), this piece of code is the only thing that saved me (worked for 'Select' as well).