What if I want to limit the number of check boxes that can be selected?

If needed how would I limit the amount of check boxes that can be selected? In this exercise I could select all three of them, but lets think that you’re limited to only 1 topping.

Thanks!

3 Likes

Checkboxes intentionally allow multiple selections. Radio buttons, on the other hand will only permit one item to be selected.

Checkboxes vs. Radio Buttons

10 Likes

Thanks! And is there an in-between? Not only one option but not all of them neither?

3 Likes

Since checkboxes are essentially independent and do not represent selection from a group the way radio buttons do, we would need to implement our own control over the maximum allowable selections. Bear in mind that it goes against the grain of checkboxes, since it would forbid the completely normal, Select All checkbox.

That is not to say, “don’t do it,” just that it is atypical to impose limits on a checkbox list.

One particular use would be a selection from a list by keyword or label, then toggling it so all others may be selected (for removal, or whatever). Gmail would be an example of potential usage for such a feature.

To my best recollection, HTML does not give us a mechanism to limit checkboxes. If my memory is bad, so be it. There is still a way to do it with the DOM, though, once we give it some thought.

The first consideration is the POSTDATA object that is created when we Submit a form. But that would be something easier to analyze server-side.

The second consideration would be to inspect the form values onsubmit, as it were, though this could get messy with sending the form up to the server.

The third consideration would be to post a listener on that section of the form and keep track of the number of checkboxes checked, then disable that section of the form when the maximum is reached. This would not interfere with the submit event.

13 Likes

mtf, you are an absolute gem. I appreciate how thorough you are with all of your explanations on all the FAQs, it is beyond helpful!

7 Likes

Makes complete sense! As I went through radio buttons I understood what you meant by selecting from a group (and I think this could also be a suitable solution when the time comes, right?).

Anyway, thanks again!

1 Like

Once you get into scripting, take another look at this challenge. Say we have six choices and wish the user to select any three. As forms go, design is everything. Usability is one of the reasons some people simply won’t use them.

3 Likes