How can I disable a dropdown list in a second column if N/A is selected in column 1? | XM Community
Skip to main content
Solved

How can I disable a dropdown list in a second column if N/A is selected in column 1?

  • June 23, 2020
  • 9 replies
  • 216 views
R

I have two columns in a side-by-side question. Column 1 has options 1-4, the 4th of which is 'N/A'. Is there a simple way I could disable the second column if 'N/A' is selected in column 1?
Right now I have
jQuery("#"+this.questionId+" input[type='radio']").on('click',function(){
         if(jQuery(this).val()==4){
jQuery("[id='QR~QID106#2~1']").prop("disabled", true);
       jQuery("[id='QR~QID106#2~2']").prop("disabled", true);
       jQuery("[id='QR~QID106#2~3']").prop("disabled", true);
    }
   });
but because I have three rows, the above disables the second column entirely if option 4 is selected for ANY of the three rows. How can I edit this so it only disables the row where N/A is selected in the first column?

Best answer by TomG

Don't use ids. Find the second column element relative to the first. For example, if the second column is a text input:
var col1 = jQuery(this);
if(col1.val()==4) col1.closest("tr").find(".InputText").prop("disabled",true);

TusharDalwani

9 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • Answer
  • June 23, 2020

Don't use ids. Find the second column element relative to the first. For example, if the second column is a text input:
var col1 = jQuery(this);
if(col1.val()==4) col1.closest("tr").find(".InputText").prop("disabled",true);

R
R
  • rrauser
  • Author
  • June 23, 2020

TomG thanks for the tip, I will try that. What if it's a dropdown list in the second column instead of a text input?

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • June 23, 2020

https://www.qualtrics.com/community/discussion/comment/27039#Comment_27039Change find(".InputText") to find("select").

R
R
  • rrauser
  • Author
  • June 23, 2020

TomG Ok thanks! I got it working somewhat:
jQuery("#"+this.questionId+" input[type='radio']").on('click',function(){
  var col1 = jQuery(this);
  if(col1.val()==4) col1.closest("tr").find("select").prop("disabled",true);
 });
but my issue now is that if I click on N/A and change to one of the other three options, the dropdown list stays disabled. Is there a way I can tweak this further so the dropdown is re-enabled if the selected option is changed?

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • June 23, 2020

Add an else to your if to reenable it.

R
  • rrauser
  • Author
  • June 23, 2020

TomG Thank you so much! Think it's working well now:
 jQuery("#"+this.questionId+" input[type='radio']").on('click',function(){
  var col1 = jQuery(this);
  if(col1.val()==4) col1.closest("tr").find("select").prop("disabled",true);
   else{
       col1.closest("tr ").find("select").prop("disabled",false);
   }
 });

D
Forum|alt.badge.img
  • DLA
  • December 11, 2022

How do I find the "questionID"?

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • December 11, 2022

https://community.qualtrics.com/XMcommunity/discussion/comment/53057#Comment_53057You don't need to. 

this.questionId
IS the question id.

MatthewM
Level 6 ●●●●●●
Forum|alt.badge.img+30
  • MatthewM
  • Level 6 ●●●●●●
  • June 27, 2023

https://www.qualtrics.com/community/discussion/comment/27039#Comment_27039Change find(".InputText") to find("select").

Thank you for sharing this; it works wonders! If I wanted to apply this code to a question where the second column is a radio button (Yes/No), what would I use in place of find("select")?

Terms & ConditionsAccessibility statement