Using Javascript to access/change control's property

Set readonly for input text

document.getElementById("ctrl_id").readOnly  = true; //pay attention to the readOnly, it's case sensitive.

 

Set option to unable to select for select control:

<option value="Genre" disabled="disabled">Genre</option>

 

Set select control to disabled (it has no readonly property):

<select disabled="disabled"></select>

 

Add a new option to a select control, it works under firefox 2.x and IE 5.x:

function addOption(select_ctrl, option_value, option_text){
    var ctrl = document.getElementById(selectctl);
    
    if(ctrl == null)
        return;
    
    var doc = ctrl.ownerDocument;
    if (!doc)
        doc = ctrl.document;
        
    var opt = doc.createElement('OPTION');
    opt.value = option_value;
    opt.text = option_text;
    
    ctrl.options.add(opt, ctrl.options.length);
}

 

Delete an option from select control:

selectctl.options[selectctl.selectedIndex] = null;

Delete all options from select control:

selectctrl.options.length = 0;

Change the css for an object:

document.getElementById("ctrl_id").className="SHOWN";