Checkbox cannot be enabled


Topic: Checkbox cannot be enabled

csax asked 3 years ago

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 3 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 3 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 3 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 3 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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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
Tags