Limit number of checkboxes selected

I wanted to know if there was a way to limit the number of checkboxes a person can select. So, after a person clicks the add to cart, they are greeted with a form that has multiple checkboxes I wanted to know if there was a way to limit it.

6 hours ago, Guest41 said:

I wanted to know if there was a way to limit the number of checkboxes a person can select. So, after a person clicks the add to cart, they are greeted with a form that has multiple checkboxes I wanted to know if there was a way to limit it.

Would something like this be possible within squarespace using jQuery or Javascript? Or if there are any possible plugins that may work?

16 hours ago, Guest41 said:

I wanted to know if there was a way to limit the number of checkboxes a person can select…after a person clicks the add to cart.

It is possible but it is reasonably complex to achieve and so you’re unlikely to find an answer in a post. This is because Product Forms are not loaded with the page. The code will therefore require a mutation observer that loads on product detail pages and product blocks and looks for a Product Form to be added to the page.

When a form has been added, the code needs to inspect the newly added form to see if it contains checkboxes. If it does, the code must look for checkboxes to be clicked. When clicked, the code will need to check if the checkbox is being checked or unchecked. If being checked, the code must count the checkboxes that are already checked to determine whether the limit has been reached. If it hasn’t, the box can be checked; if the limit has been reached, it should remain unchecked.

The code will also need to do the same on the cart page where the user can also edit the product form.

On 5/17/2022 at 2:30 AM, paul2009 said:

It is possible but it is reasonably complex to achieve and so you’re unlikely to find an answer in a post. This is because Product Forms are not loaded with the page. The code will therefore require a mutation observer that loads on product detail pages and product blocks and looks for a Product Form to be added to the page.

When a form has been added, the code needs to inspect the newly added form to see if it contains checkboxes. If it does, the code must look for checkboxes to be clicked. When clicked, the code will need to check if the checkbox is being checked or unchecked. If being checked, the code must count the checkboxes that are already checked to determine whether the limit has been reached. If it hasn’t, the box can be checked; if the limit has been reached, it should remain unchecked.

The code will also need to do the same on the cart page where the user can also edit the product form.

Do you have any way I can go about doing this? I have multiple products that need different maximum values and I'm pretty new to using code with applications such as squarespace so would I need to learn more about different languages such as jQuery and JavaScript or find a different solution all together?

1 hour ago, Guest41 said:

Do you have any way I can go about doing this?

This shows the checkbox limiting part but as I mentioned it will require a Squarespace specific wrapper that loads this every time the lightbox form appears.

5 minutes ago, paul2009 said:

This shows the checkbox limiting part but as I mentioned it will require a Squarespace specific wrapper that loads this every time the lightbox form appears.

 

Would I need to use the lightbox form id in order to run a check for when it's pulled up like when it says .enabled.

4 hours ago, Guest41 said:

Would I need to use the lightbox form id in order to run a check for when it's pulled up like when it says .enabled.

What specific content wrapper do I need in order to see what content I need to check is enabled?

If you do not understand what a Mutation Observer is you need to contact a developer to determine if what you want to accomplish is doable.

As @paul2009 mentions this is a complex issue that is unlikely to be solved in several posts.