Skip to main content
Kinetic Community

Enabling and Disabling Options for a Radio Button List Question

Sometimes you may desire to show someone a radio button question but not allow them to choose from all the options. This solution describes how to use JQuery to accomplish that.

Usage

Specific radio button options within a list question can be enabled/disabled on the fly (in response to the user's selection/entry into another field) by using JQuery. This is done in three steps:

  1. Include JQuery
  2. Create a function that uses JQuery to enable/disable the radio buttons
  3. Call this function with an event

Example

This example (attached) uses a question called Store to limit/change what is available in a following question called Spices. The front end looks like this:

exampleImage.png

1.  To use JQuery it must be included. You may have a local copy of jquery to include, but if not, a link like the below can be used. This would be put in the Custom Header Content on the Advanced tab of the service item.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 
2. Then there is a script UpdateChoices that uses JQuery to update the 'disabled' attribute for the individual inputs (radio buttons) for the list question you want to modify. This function is also put in the Custom Header Content on the Advanced tab of the item.
 
<script>
function UpdateChoices(store) {

//get the ID for the question we want to enable/disable options for
qstn = KD.utils.Util.getElementObject('Spices', 'QANSWER_').id;
qstnValue =  KD.utils.Action.getQuestionValue('Spices');

//enable/disable the radio button options by updating the 
//'disabled' attribute for that particular input value for the 
//qstn id found above
if (store == "Supermarket") {

   //Enable Dill because we can get that at the supermarket
   $("#"+qstn).find('input[value="Dill"]').attr('disabled',false);
   //Disable Elderflower because we can't get that at the supermarket
   $("#"+qstn).find('input[value="Elderflower"]').attr('disabled',true);
   //Note that black pepper doesn't need to be mentioned 
   //because it's enabled for all three options
   
   //Clear the selection if the now disabled item(s) where chosen
   if (qstnValue == "Elderflower")  
      KD.utils.Action.setQuestionValue('Spices', null);
      
} else if (store == "Butcher") {

   //Disable Dill and Elderflower because we can't get that at the butcher
   //Note that black pepper doesn't need to be mentioned 
   //because it's enabled for all three options
   $("#"+qstn).find('input[value="Dill"]').attr('disabled',true);
   $("#"+qstn).find('input[value="Elderflower"]').attr('disabled',true);
   
   //Clear the selection if the now disabled item(s) where chosen
   if (qstnValue == "Elderflower" || qstnValue == "Dill")  
      KD.utils.Action.setQuestionValue('Spices', null);
      
} else {

   //Enable Dill and Elderflower because we can get them at the herbalist
   //Note that black pepper doesn't need to be mentioned 
   //because it's enabled for all three options
   $("#"+qstn).find('input[value="Dill"]').attr('disabled',false);
   $("#"+qstn).find('input[value="Elderflower"]').attr('disabled',false);
   
}
}
</script>
 
3. There is an event on the Store question that calls the UpdateChoices function on click. If this question was a list box it would be on change instead.
 
clickEvent.png
 
This example is downloadable here. There is no catalog definition included, so you will need to move this to one of your catalogs to test. Also, this item expects the klean theme; you will likely need to modify the Display Page (JSP) (Advanced tab).