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

Reply


Terms & ConditionsCookie settings