Making A Read Only Field

Many users like to use our default answer feature to pre-populate their survey. Often they wish to make this field appear as read only so that the respondent cannot change the answer. While this is not a built-in feature, we do have some easy-to-use JavaScript that allows you to make one of the following question types read only.

Compatible Question Types:

• Textbox
• Essay
• Radio Button
• Checkboxes
• Dropdown Menu

Try it out in a survey: 

Check it out in an example survey!

OR

Add a survey with this setup to your account!

Setup

Once you have your survey set up you will use one of the following scripts below depending on your question type. To add this to your survey click Add New Action > JavaScript.

Textbox

This script will disable editing on a textbox with the CSS Class Name rotextbox. Learn how to add a Class Name to your question.

$(document).ready(function(){
  // makes a textbox question with the CSS class name "rotextbox" readonly
  $(".rotextbox :text").attr("readonly",true);
});

Essay

This script will disable editing on a essay with the CSS Class Name roessay. Learn how to add a Class Name to your question.

$(document).ready(function(){
  // makes an essay question with the CSS class name "roessay" readonly
  $(".roessay").find("textarea").attr("readonly",true);
});

Checkbox

This script will disable editing on a checkbox with the CSS Class Name rocheckbox. Learn how to add a Class Name to your question.

$(document).ready(function(){
  // makes a checkbox question with the CSS class name "rocheckbox" readonly
  $(".rocheckbox :checkbox").attr("readonly",true);
});

Radio Button

This script will disable editing on a radio button with the CSS Class Name roradiobutton. Learn how to add a Class Name to your question.

$(document).ready(function(){
  // makes a radio button question with the CSS class name "roradiobutton" readonly  
  $(".roradiobutton :radio").attr("readonly",true);
});

Dropdown Menu

This script will disable editing on a dropdown menu with the CSS Class Name rodropdown. Learn how to add a Class Name to your question.

$(document).ready(function(){
  // makes a dropdown menu question with the CSS class name "rodropdownmenu" readonly
  $(".rodropdownmenu select").attr("readonly",true);
});

If you need to disable all the above question types you can copy this script and make sure to use the appropriate CSS Class Names to disable each question. Learn how to add a Class Name to your question.

$(document).ready(function(){
  // makes a textbox question with the CSS class name "rotextbox" readonly
  $(":text").attr("readonly",true);
  
  // makes an essay question with the CSS class name "roessay" readonly
  $(".roessay").find("textarea").attr("readonly",true);
  
  // makes a checkbox question with the CSS class name "rocheckbox" readonly
  $(".rocheckbox :checkbox").attr("readonly",true);
  
  // makes a radio button question with the CSS class name "roradiobutton" readonly  
  $(".roradiobutton :radio").attr("readonly",true);

  // makes a dropdown menu question with the CSS class name "rodropdownmenu" readonly
  $(".rodropdownmenu select").attr("readonly",true);
});