Enable/Disable Text Box using Radio Button on a Side by Side Question

1 year ago
4 October 2022
4 replies
462 views

Userlevel 1

robi_kalinisan
13 replies

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.

4 replies

Userlevel 7

+36

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('[id="QR~QID9#3~1~1~TEXT"]').attr("readonly",false); /*Replace with Answer QID to enable*/
}
else {
jQuery('[id="QR~QID9#3~1~1~TEXT"]').attr("readonly",true); /*Replace with Answer QID to disable*/
}
if(jQuery( "[id='QR~QID9#1~1~3']" ).prop('checked')== true) /*Replace with Radio button ID to enable on click*/
  {
jQuery('[id="QR~QID9#4~1~1~TEXT"]').attr("readonly",false); /*Replace with Answer QID to enable*/
}
else {
jQuery('[id="QR~QID9#4~1~1~TEXT"]').attr("readonly",true);/*Replace with Answer QID to disable*/
}

})
});
Hope this helps!