Limiting 6 out of 20 checkboxes be checked

[bentomsouthgate]

Hi Bubble Community,

I need some help in creating a solution to my problem!

I have a list of 20 checkboxes a user can select maximum 6.

How can I create a solution so after 6 have been selected, it limits any more being selected until one has been unselected!

The unchecked boxes are saved in the DB as 0, and the checked boxes are saved as 1. This is crucial as this data is used in a calculation.

My original plan was to use custom states, e.g. when a checkbox is checked custom state adds one and then when unchecked custom state subtracts one. So when custom state = 6 checkboxes are disabled…

But the user has the option to change their options…. When the user edits their options, the checkbox is automatically filled out based on what they had previously selected, and the custom state is reset to 0 despite 6 being already selected…

Is there a way to set it, so a custom state automatically = the number of boxes checked?

Thanks,

Ben

[adamhholmes]

Set the custom state to be a list and use ‘count’ to limit the number of selectable options.

So when the custom state’s count 6 or more don’t allow any more option to be chosen.

Personally, I wouldn’t use checkbox elements for this, but rather I’d use icons that look like checkboxes, That gives you more flexibility as to what you can do in workflows.

Then I’d have a custom state on the repeating group, which is same ‘type’ as the content of the repeating group, and is a list.

When a ‘checkbox’ is clicked (i.e. the icon in the cell), run a workflow action to add the current cells ‘thing’ to the custom state list with a conditional - only when repeating group’s custom state’s list doesn’t contain current cell’s thing AND repeating group’s custom state list count < 6

Then have another action to remove the current cell’s thing from the custom state 's list when the icon is clicked (only when the repeating group’s custom state list contains the current cell’s thing).

I’m not sure what you meant by ‘The unchecked boxes are saved in the DB as 0, and the checked boxes are saved as 1.’ but you can do whatever you want on your database referencing the custom state list on the repeating group, so if you want to store certain values in the DB, just make reference to the custom state’s values.

[bentomsouthgate]

Thanks, the issue I’m having is that the checked options are saved in the database. So when the user checks six options, the custom state stops them from checking 7 options (this part works well), they click done and the data is saved in the DB so that when the user goes back to change their options it will automatically tick the 6 that they previously ticked. But this means when the user goes back to amend the options, 6 boxes/icons could be checked but custom state list count will be 0 allowing them to check 6 more! If you get what I mean?

[adamhholmes]

Just set the custom state on pageload, based on the user’s DB entry.

That will show the relevant options as already selected and set the count to 6 (or however many they have stored on their database entry), so they can’t add anymore until they de-select existing options.

[bentomsouthgate]

Okay, thanks I will try this!!!

The other issue I am having, and it might because I am still using checkboxes…

When the custom state reaches 6, how can I set the conditional that no more options can be chosen but options can still be unchosen?

Thanks,

Ben

[adamhholmes]

Yeah, that’s one of the issues with using the checkbox element - you can only disable it entirely (so it can’t be selected or unselected).

Using icons get’s over that issue - plus you have way more design options.

[bentomsouthgate]

Do you get over this issue by putting an conditional/“Only When” on the workflow saying something like only add option to custom state when custom state count is less than 6?

[adamhholmes]

Yes, exactly that.

[bentomsouthgate]

Thanks a lot for this. I will put this into action with icons now!!

[leon3]

@adamhholmes thanks for explaining. Could you provide a bit more detailson the first bit of your explanation? For the the custom state, what is the state type? And how do you use ‘count’ to limit the number? I assume in the workflow, when checkbox’s value is changed, you set the state, but what do you put into the ‘value’ box? Thanks ! Please see below, what I mean:) . image|690x364

[adamhholmes]

I would set the state ‘type’ to be the same as the items being selected (and make it a list).

To limit the possible number of selection, just ad a contitional to the workflow that adds new items to the custom state list to only run when the custom state’s count is less than whatever number you want to limit it to.

To set the value you need to add the value of the current cell (whatever the datatype is) to the custom state list.

To add something to a custom state list you need to reference the custom state as it is, and then use ‘plus item’ to add a new item to it.

So when your ‘Icon’ is clicked just set the custom state value to custom state: plus item, current cell's item