SharePoint Survey: Limit number of selectable checkboxes

Hi all

Let's pretend you have to build a survey. You setup a multiple-choice question, providing 5 answers. The user should be able to select up to 3 answers, but not more.

Out of the box, you cannot limit the amount of selected checkboxes. You could try it with Column Validation, but let's look at the possibilities with JavaScript and Jquery.

First of all, setup your survey and your question.

Select Choice (menu to choose from) and provide the answers. If you complete the survey now, you will be able to select all checkboxes:

But we want to restrict the selectable checkboxes to 3. Here are the steps:

First, get the Jquery library from https://jquery.com.

Rename it, so the filename does not show any version (eg. jquery.min.js). This makes it easier to update the file with future releases.

Put it into the Site Assets library.

In your survey, open the NewForm.aspx by clicking on Respond to this Survey. Edit the page.

Insert a Script Editor Web Part ("Add a Web Part" > "Media and Content" > "Script Editor") and insert following Script:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<script src="/yoursitecollection/yoursite/SiteAssets/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> var maxCheckboxes = 3; $('input[type="checkbox"]').change(function () { var checkedNum = $('input[type="checkbox"]:checked').length; var allCheckoxesChecked = $('input[type="checkbox"]:checked'); var allCheckboxes = $("input[type='checkbox']"); //alert(checkedNum + " - " + maxCheckboxes); if (checkedNum == maxCheckboxes) { $(allCheckboxes).attr('disabled', 'disabled'); $(allCheckoxesChecked).removeAttr('disabled'); } else { $(allCheckboxes).removeAttr('disabled'); } }); </script>

Move the Web Part into the Web Part Zone AFTER the questions (Zone 2). Apply the changes and click on Stop Editing.

Now respond to this survey again. What happens if you set three checkboxes? 

The script disables the other remaining choices:

There's another variant!

Do you want the user to get informed through a popup/alert? Here's another script:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<script src="/sitecollection/site/SiteAssets/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> function limitCheckBox(){ var count=0; $(".ms-formlabel:contains('What is your favourite TV Show?')").closest("table").find("input[type='checkbox']").each(function(){ if($(this).is(':checked')){ count++; } }); if(count>3){ return false; }else{ return true; } } function PreSaveAction(){ if(!limitCheckBox()){ alert("Please do not vote for more than 3 shows!"); return false; } return true; } </script>

After clicking on Finish you get following popup:

Have you noticed the question? I had to delete the apostrophe' because the script doesn't like it. For this solution, do not use any apostrophe in your question.