Limit checkbox selection to 1

Hello all,

First of all I am a beginner and not very familiar to programming but trying my best to improve, so please be forgiving for my lack of knowledge.

Here is my problem:
I am trying to make the user answer to a yes/no question using checkboxes. However, I can’t figure out how to limit his choice to a single answer (Yes or No). Moreover, i’d like the following condition: If “yes” is selected and “no” is pressed then the “yes” checkbox becomes unchecked (but still “checkable”).
Not sure if I made myself clear…
Do you have any tutorial to share for this “easy” problem or solution to suggest?

Any help is welcomed. Thank you

PS: I know Radiobuttons exist, however I’m not satisfied by their design and conditional limits in terms of layout (Maybe there are ways to modifiy it ?).

1 Like

Hey,

Welcome to bubble. There are many ways to do that. It really depends on how you are set up. One way is using custom states. Especially if you aren’t saving the data yet.

Check this link out. Let me know if that helps.

Thanks, @J805… I’m sure @alignr will find that useful, however, I’m not sure that I demonstrated this type of use.

@alignr asks a good question, which I would phrase as: Let us say that I have n checkboxes on a page that are “mutually exclusive as a group”. Only one can can be checked at a time. If one is selected, all others must be set to off/unchecked."

This is actually a pain in the butt to do in the way that Bubble would typically require us to do it. But I have an alternative idea. My question for the original poster:

@alignr: In your design, can your checkboxes be easily grouped in a group? For example, can they be displayed like this…

… or would they be scattered all around the page?

Second: How do you intend to to store the information selected: Does each represent some different yes/no state on some object? (e.g., if Checkbox A is checked, this represents “User has dog” and so we want to set User’s has Dog to “yes”.) Or are you trying to get back a list (array) of yes/no values. (e.g., if Checkbox B is selected, this list would look like [no, yes, no, no, no])…

… or is it something else?

First of all thank you @J805 and @keith for your answers. I am going to have a look to the video you linked above and find out how to customize checkboxes :wink:

@keith you perfectly understood my objective. My checkboxes can be grouped (in columns but it should not change much I think).

To answer your second question, checkboxes represent from my understanding indeed a state.

Thank you very much for your help !

Hey @alignr: I’m not asking if YOU understand checkboxes in general… I am asking what does the user clicking the checkbox represent? What does the group of checkboxes represent?

(If you have a draft page you could point to – and no I do not want to see your editor – it would be helpful in terms of understanding what it is you are collecting? That might influence how I suggest that you do this…)

Best Regards,
Keith

Also… how many checkboxes are we talking about here in each group?

Ok basically I’m asking the user to fill out a Q&A. The layout will be like this :

Question 1 :

  • Answer 1
  • Answer 2

Question 2 :

  • Answer 1
  • Answer 2
  • Answer 3
  • Answer 4

Button Send

For each question, the user must be able to choose only one answer which are under the form of checkboxes. When the user click to the button send, it should collect the answers and send them to our email.

1 Like

Use a radio button instead.

2 Likes

I think they don’t want to go with that option. That’s why we are trying to give alternatives. :slight_smile:

1 Like

It might be easier to modify the radio button style than trying to make the checkboxes behave like radio buttons through conditions and workflows.

I think I would do a set state. For example:

Set the state to “text”. Call it “Question 1” or something.

Then when you click on a checkbox set the state to that letter. “A, B, C, D, etc”

On each conditional statement of each checkbox just say check if set state is the matching letter. Then show check box as checked if it is true.

If this doesn’t work with the check boxes it would definitely work with an icon that is a checkbox.

If you need to I can do a quick example for you. Hope this is helpful. :slight_smile:

At the end to retrieve your results you can just look at each set state for the answer. Much easier that way anyways.

2 Likes

@J805 Thank you for your answer. Indeed, I would highly appreciate If you could show me an example to be honest.

No problem. Let me set it up and share it with you. Give me a little time to get to my computer at work.

No problem, thanks :ok_hand:

Here you go. Let me know if you have any questions.

Editor: https://bubble.io/page?name=index&id=805checkboxes&tab=tabs-1
Preview: https://805checkboxes.bubbleapps.io/version-test

Hope this is helpful

Jason K
Freelance Bubbler

2 Likes

Thank you very much, exactly what I needed ! :slight_smile:

This IS a valid solution. The OP’s use case IS the radio button use case.

That being said, I am interested in working out a clever method for making custom radio button widgets if any # of options w/o having a workflow nightmare. Not sure it’s possible in vanilla bubble just yet.

Welcome! Enjoy. You can change it to whatever icon you want. A square checkbox, or a circle filled in when “checked”. Just make it look the way you want it. :slight_smile:

Was there a reason why you ran 2 custom states? what does this first one do?