Repository navigation
Checkbox button #24040
Description
Hello,
is there a plan to add support for - only select one checkbox in group?
https://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a-group
Also what do you think about changing colors for active/hover btn checkbox? They are the same now and it's not easy to differentiate is checked or not on hover when clicking.
Thanks
Activity
andresgalante commentedon Sep 21, 2017
Hi @pnxsaz
I don't understand your usecase:
What you are describing is a radio input not a checkbox. That behaviour is build in HTML.
I don't think checkboxes have hover state. Sorry I must be completely lost with your usecase
patrickhlauke commentedon Sep 21, 2017
I can understand the "allow to have either none or only one selected" use case (only way to do this with radio buttons is to have a neutral extra radio button acting as the "none"). Not sure how clear it would be to users, unless it's made explicit with the label/legend for the group
bkdotcom commentedon Sep 21, 2017
@pnxsaz that fiddle uses 3 lines of bootstrap compatible javascript to accomplish that.
real-world code would contain just a bit more code to limit the unselecting to the same checkbox group
andresgalante commentedon Sep 21, 2017
Ok, I get it now the "allow to have either none or only one selected".
Thanks a lot for the clarification. Do you guys think this use case is common enough that it should belong in Bootstrap?
@pnxsaz To be honest I never had to deal with it that's why I might be biased, but I think this makes a perfect case for a bootstrap plugin project.
Your example seems to me the same as this:
https://codepen.io/andresgalante/pen/oGLrNW
None is selected, unless you select one, right? why would you use checkboxes for something that is a radio btn.
andresgalante commentedon Sep 21, 2017
Yeap I got it, you want to make checkboxes behave like radios.
My point is don't do it and this does not belong in bootstrap. Hacking HTML just because, is wrong.
pat270 commentedon Sep 21, 2017
You can make radio buttons look like checkboxes with custom forms, change
.custom-radioto.custom-checkbox.https://getbootstrap.com/docs/4.0/components/forms/#radios
patrickhlauke commentedon Sep 21, 2017
@pat270 this isn't about the look, but behavior. anyway, it's marked as a feature request now. not sure if it's common enough to warrant inclusion into core bootstrap, leaving it up to the team/@mdo to decide (and then it'll need to be coded)
alecpl commentedon Sep 22, 2017
Please, don't add this feature to Bootstrap.
bkdotcom commentedon Sep 22, 2017
@alecpl agreed.
It's a huge UX anti-pattern.
For one thing, it'd make more sense to add special behavior to radio buttons that would allow the single selected radio to be unselected.
Should you "need" this behavior for your site, it can easily be implemented with 3 lines of javascript.
For a framework that agonizes whether or not to change the cursor on button hover, this doesn't belong.
Herst commentedon Sep 22, 2017
How about using validation?
Think about the more generalized case where you have multiple options but only certain combinations are possible; if the number of combinations is low you could do radio buttons for each one of them but otherwise checkboxes with validation might be the only sensible way.
sarbull commentedon Sep 24, 2017
This can be easily achieved with Angular Forms Validation. Somehow
onChangeset the other values to undefined from the array of options you have and that's it.