Making answer exclusive in a side by side table | XM Community
Skip to main content

Hello, 

Below is an image of the side by side question. 

 

 

I would like to know if there is a way to make an answer choice exclusive in a table of this style. For example, if a individual selects “My organization does not offer me support” I would like to prohibit the selection of any other answers in the table. 


Additionally, is there a way so that the second column is only accessible to the respondent if they select a choice in the first column? For example, if an individual does NOT select “Offered” for “Peer Support” then they will not be able to select either “I utilized this support” or “I did not utilize this support”.

 

Thank you!

 

Yes, using JS click event we can add the required functionality and validation. 


Thank you, I have very limited knowledge of JS. Do you have an example code of JS click event? 


 

<!-- JavaScript -->
<script>
function enableUtilized() {
  // Enable the utilized checkboxes when "Offered" is selected
  const utilizedCheckboxes = document.querySelectorAll('inputpname="utilized"]');
  utilizedCheckboxes.forEach(checkbox => checkbox.disabled = false);
}

function disableUtilized() {
  // Disable the utilized checkboxes when "My organization does not offer me support" is selected
  const utilizedCheckboxes = document.querySelectorAll('input'name="utilized"]');
  utilizedCheckboxes.forEach(checkbox => {
    checkbox.disabled = true;
    checkbox.checked = false; // Also uncheck the checkboxes
  });
}
</script>

 

In this example, the JavaScript functions enableUtilized() and disableUtilized() handle the logic for enabling and disabling the checkboxes in Column 2 based on the selection in Column 1. The onchange attribute is used in the radio buttons to trigger these functions when the user makes a selection.

 


 


#using c1 as first column class, c2 is column name for 2nd class

Your code should look something like below, play with it!

jQuery(‘.c1’).each(function() {

if(jQuery(‘.c1’).is(‘checked’)==True)

{

jQuery(‘.c2’).css(‘visibilitiy’,’none’)

}

else

{

jQuery(‘.c2’).css(‘visibilitiy’,’visible’)

}

})


Leave a Reply