Expected behavior When copy and pasted all worked well until I tried to incorporate it in the ASP.Net CheckBoxFor and, to not messup the mapping between value and variable, changed the id. I expected this object to be styled with css and or javascript so you can easily incorporate it using class="..."

Actual behavior I had to learn, that while many items such as icons etc. are styled using the class tag (which is perfectly fine) this is not the case with material Checkbox. Apparently it depends on the Id tag, which in my opinion is a design flaw, which has a lot of drawbacks, since id is reserved to address / identify an item, not styling it. What if you have a form where you would use two checkboxes. You now have to rely on name rather than id! And there might be technologies that simply would not allow abusing the id tag.

I really hope this is not the same for other elements one may use, as this would drastically limit the usability

Resources (screenshots, code snippets etc.) https://mdbootstrap.com/docs/jquery/forms/checkbox/#indeterminate-state

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="materialUnchecked">
  <label class="form-check-label" for="materialUnchecked">Material unchecked</label>
</div>

this works, because id is set to materialUnchecked.

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="RememberMe" checked>
  <label class="form-check-label" for="RememberMe">Keep me signed in</label>
</div>

Does not work since id is not materialUnchecked.

It should be (unchecked):

<div class="form-check">
  <input type="checkbox" class="form-check-input materialUnchecked" id="RememberMe">
  <label class="form-check-label" for="RememberMe">Keep me signed in</label>
</div>

checked:

<div class="form-check">
  <input type="checkbox" class="form-check-input materialChecked" id="RememberMe">
  <label class="form-check-label" for="RememberMe">Keep me signed in</label>
</div>

Thanks for your investigations and the fix. Best regards, Chris