Dynamically Show and Hide Individual Checkboxes in a Single Checkbox Question

Last updated
Save as PDF

There is a possibility that you may want to control which options a user selects based on something already selected (either on an earlier page or above on the current page). This solution describes how to have one checkbox questions with all the options and control which options the user sees by showing/hiding individual checkboxes.

Usage

This is done in three separate, small javascription functions. One JS, _hideCheckbox(label, selection), hides the specified option for the specified checkbox question by changing it's display style to "none". One, _showCheckbox(label, selection), shows the specified option for the specified checkbox question by changing it's style to inline (this might cause issues if the options are listed vertically). The last, controlChoices(), calls these two functions.

Example

The below example controls what options a person has for creating a new user.

controlChoices();

would be called, in this example, on load of the second page for the service item. If the checkbox question is on the same page as the questions that control it, it can be called as a Custom Change event for the question(s) that control it.

//************************checkbox control functions**********************************************

//Hide the passed in selection for the checkbox question with the provided label.
function _hideCheckbox(label, selection)
{
  var answer = KD.utils.Util.getElementObject(label);
  var choices = KD.utils.Util.getElementsByClassName("answerValue", "input", answer);
  for(var x=0;x<choices.length;x++)
  {
    if(choices[x].value == selection)
      {
        choices[x].parentNode.style.display = "none";
      }
   }
}

//Show the passed in selection for the checkbox question with the provided label.
function _showCheckbox(label, selection)
{
  var answer = KD.utils.Util.getElementObject(label);
  var choices = KD.utils.Util.getElementsByClassName("answerValue", "input", answer);
  for(var x=0;x<choices.length;x++)
  {
    if(choices[x].value == selection)
      {
        choices[x].parentNode.style.display = "inline";
      }
   }
}

//Show/Hide options based on what is selected in previous questions
function controlChoices() {
        //check if person filling out the request is VIP or Support Staff
        //This data was pulled in automatically on the first page of the request
        var vip = KD.utils.Action.getQuestionValue('VIP');
        var supportStaff = KD.utils.Action.getQuestionValue('Support Staff');

        //only VIPs can add managers
        if (VIP == "Yes") {

                _showCheckbox("Select Action", "Add Manager");
        } else {
                _hideCheckbox("Select Action", "Add Manager");
        }

        //Only support staff can add new support staff
        if (supportStaff == "Yes") {
                _showCheckbox("Select Action", "Add Support Staff");
        } else {
                _hideCheckbox("Select Action", "Add Support Staff");
        }

}

//************************end checkbox control functions**********************************************