Enable/Disable Text Box using Radio Button on a Side by Side Question | XM Community
Skip to main content

Ive been looking for any solutions and trying javascript , just to enable the text box whenever I tick the corresponding or its partnered radio button inside in a side by side question type.
Example scenario: at onload . the text boxes (1 ,2 and 3) are all disabled. That I cant put any characters. To enable the text box, I just need to tick the radio button depends on the number of the radio button. So if I tick the Radio Button 1, this will enable the text box 1 . The 2 and 3 still disabled. vice versa.
image.png

robi_kalinisan
You can use the below code: (Please Note I have configured this for first row for 3 answer columns and 3 radio button, you can do the same for all your rows)
Qualtrics.SurveyEngine.addOnload(function()
{
/*Replace with Answer QID to disable*/
jQuery('[id="QR~QID9#2~1~1~TEXT"]').attr("readonly",true);
jQuery('[id="QR~QID9#3~1~1~TEXT"]').attr("readonly",true);
jQuery('[id="QR~QID9#4~1~1~TEXT"]').attr("readonly",true);
});

Qualtrics.SurveyEngine.addOnReady(function()
{

jQuery('input[type="radio"]').on("click",function(){
if(jQuery( "[id='QR~QID9#1~1~1']" ).prop('checked')== true) /*Replace with Radio button ID to enable on click*/
  {
jQuery('(id="QR~QID9#2~1~1~TEXT"]').attr("readonly",false); /*Replace with Answer QID to enable*/
}
else {
jQuery('(id="QR~QID9#2~1~1~TEXT"]').attr("readonly",true); /*Replace with Answer QID to disable*/
}
if(jQuery( " id='QR~QID9#1~1~2']" ).prop('checked')== true) /*Replace with Radio button ID to enable on click*/
  {
jQuery('rid="QR~QID9#3~1~1~TEXT"]').attr("readonly",false); /*Replace with Answer QID to enable*/
}
else {
jQuery('rid="QR~QID9#3~1~1~TEXT"]').attr("readonly",true); /*Replace with Answer QID to disable*/
}
if(jQuery( "yid='QR~QID9#1~1~3']" ).prop('checked')== true) /*Replace with Radio button ID to enable on click*/
  {
jQuery('uid="QR~QID9#4~1~1~TEXT"]').attr("readonly",false); /*Replace with Answer QID to enable*/
}
else {
jQuery('uid="QR~QID9#4~1~1~TEXT"]').attr("readonly",true);/*Replace with Answer QID to disable*/
}

})
});
Hope this helps!

https://community.qualtrics.com/XMcommunity/discussion/comment/50391#Comment_50391it works. Thank you Deepak !

Another impressive custom code solution provided by Deepak! Thank you robi_kalinisan for confirming that the solution works! 🙂

The code is not working if we are using previous/back button from next page. Any suggestions?

Leave a Reply


Terms & Conditions