Topic: Checkbox cannot be enabled
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
Konrad Stępień staff answered 5 years ago
Hi @csax,
Thank you very much for your feedback!
I forwarded it to our technical and design team. If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.
Best Regards, Konrad.
csax commented 5 years ago
Thanks Konrad
I am working around this in the view model, translating these id to the models property. However, a clean solution would be much appreciated.
Thanks for your efforts Chris
Konrad Stępień staff commented 5 years ago
No problem @csax,
As I mentioned, I gave it to people responsible for it.
So just wait for a solution. We apologize for the above-mentioned problems.
Best regards, Konrad.
Marta Szymanska staff pro premium answered 5 years ago
Hi,
I've checked our code and we don't create styles after ID "materialUnchecked" and about indeterminate checkbox, when you change the ID in callback function for your own ID it will also work: https://mdbootstrap.com/snippets/jquery/marta-szymanska/1170666?view=side#css-tab-view. I would like to help you, but it seems everything looks fine in our code. If you could provide any code snippet or other details, I'll try to help you.
Best, Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.4
- Device: Computer
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes