Skip to main content

Hello I am trying to limit the amount of checkboxes a user can select on an Unbounce form (the form is currently on a Lightbox pop-up) to 3 checked.


I’ve tried the following code and also have tried by selecting the class “checkbox” as well. Neither option works on the live page. I have selected to insert script “before closing body tag.”


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>



<script>

  var max_limit = 3;

  $(document).ready(function (){

    $("#benefits_checkbox:input:checkbox").each(function (index){

      this.checked = ("#benefits_checkbox:input:checkbox" < max_limit);

    }).change(function (){

      if ($("#benefits_checkbox:input:checkbox:checked").length > max_limit){

        this.checked = false;

      }

    });

  });

</script>

Any help would be appreciated.

Would absolutely LOVE the answer to this question as well! I’ve been searching for it for over 3mo now 😦

I’ve found a JS script that works, however it fails when I embed it into my form code. But that shouldn’t be an issue for your intended purposes. Hope that this works!:


$('inputntype=checkbox]').change(function(e){

   if ($('inputntype=checkbox]:checked').length > 1) {

        $(this).prop('checked', false)

        alert("Sorry, only 1 selection is allowed.");

   }

})

Stack Overflow - Praveen’s answer

  1. To limit the number of checkboxes that can be selected, use JavaScript or a similar scripting language.
  2. Implement a counter to track the number of selected checkboxes.
  3. Disable the remaining checkboxes once the limit is reached.
  4. Provide visual feedback when the selection limit is reached, such as greying out unselectable checkboxes.
  5. Consider adding a message that informs the user of the maximum number of selections.
  6. Allow users to deselect a checkbox to free up space for another selection.
  7. Use event listeners to dynamically update the count of selected checkboxes.
  8. In forms, validate the number of checkboxes selected before submission.
  9. Apply a Block Blast strategy by carefully managing the interaction flow, just like controlling block placements for optimal outcomes.
  10. Test the functionality across different browsers and devices for consistency.
  11. Implement accessibility features, ensuring keyboard navigation is smooth and users can clearly understand the limit.
  12. Regularly review and adjust the number of selections allowed based on user feedback and usage data.

Reply


Terms & ConditionsCookie settings