This code uses PrototypeJS (which is available in ServiceNow by default) to manipulate the HTML through javascript. It can be helpful in client scripts when there's no other way to change the look of elements on a page. Here is some documentation on Prototype that should help you understand a little bit better.
http://api.prototypejs.org/
I've commented the code below to explain what's going on. I actually wrote this code way back when at SNGuru. Here's some more information that may be helpful on the topic.
https://www.servicenowguru.com/scripting/business-rules-scripting/variables-form-readonly/
function onLoad() {
try{
//Get the 'Variables' section. The variables on the form are contained in an HTML element with an ID of 'variable_map'. Get that element and then move up the heirarchy until you find the next 'table' tag.
var ve = $('variable_map').up('table');
//Find all of the elements within the parent element we just selected with the following 'class' attributes (cat_item_option,slushselectmtm,etc. This will return an array of elements which we can iterate through and examine using 'each'
ve.select('.cat_item_option', '.slushselectmtm', '.questionsetreference', '.form-control', '.checkbox', '.html').each(function(elmt){
elmt.disabled = true; //Make each of the discovered elements read only
});
//Remove any reference or calendar icons (needed to make these variable types read only
// ve.select('img[src*=reference_list.gifx]','img[src*=btn-icon.gifx]', 'img[src*=small_calendar.gifx]').each(function(img){
// img.hide();
// });
// //Hide list collector icons
// ve.select('img[src*=arrow]').each(function(img){
// img.up('table').hide();
// });
}
catch(e){}
$("variable_map").querySelectorAll("item").forEach(function(item) {
var variable = item.getAttribute("qname");
g_form.setReadOnly("variables."+ variable, true);
});
//g_form.setVariablesReadOnly(true);
}
