Set a limit on multi-select options

Use custom javascript to limit users to their top e.g. 5 options

If you want to limit people's selections to a multi-select question, you can do so following the instructions below:

1. Go to your Survey Pages screen at https://www.formjoy.com/survey_pages

2. Click 'Edit settings' for the relevant survey

3. In the Custom JavaScript section, add the code provided below, with a few updates:

   1. Set the maxCheckboxes variable to whatever limit you want to place (e.g. 5)

   2. Replace QUESTION_SLUG on line 4, with the checkbox question slug from your NationBuilder survey

// Set max checkbox limit
$(function () {
  var maxCheckboxes = 5;
  var checkboxes = $('.checkbox-group[data-question-slug="QUESTION_SLUG"] .form-checkbox');

  checkboxes.on('change', function (evt) {
    var checkedCheckboxes = checkboxes.filter(":checked");
    if (checkedCheckboxes.length > maxCheckboxes) {
      this.checked = false;
      alert("Please select a maximum of " + maxCheckboxes + " options.");
    }
  });
});

If you wanted to do this for multiple checkboxes, you would need to duplicate rows 3-12 of the code above, and update the variable names of:

1. maxCheckboxes

2. checkboxes

3. checkedCheckboxes

I.e. if you had a multiselect question asking people their preferred news sources, and another asking them their most important policy issues, your code might look like the below. You would again need to replace NEWS_QUESTION_SLUG and ISSUES_QUESTION_SLUG with the relevant question slugs:

$(function () {
  // Set News checkbox limit
  var maxSelectedNews = 5;
  var checkboxesNews = $('.checkbox-group[data-question-slug="NEWS_QUESTION_SLUG"] .form-checkbox');

  checkboxesNews.on('change', function (evt) {
    var checkedCheckboxesNews = checkboxesNews.filter(":checked");
    if (checkedCheckboxesNews.length > maxSelectedNews) {
      this.checked = false;
      alert("You can only select up to " + maxSelectedNews + " options.");
    }
  });

  // Set Issues checkbox limit
  var maxSelectedIssues = 5;
  var checkboxesIssues = $('.checkbox-group[data-question-slug="ISSUES_QUESTION_SLUG"] .form-checkbox');

  checkboxesIssues.on('change', function (evt) {
    var checkedCheckboxesIssues = checkboxesIssues.filter(":checked");
    if (checkedCheckboxesIssues.length > maxSelectedIssues) {
      this.checked = false;
      alert("You can only select up to " + maxSelectedIssues + " options.");
    }
  });
});