[SalesForce] How to make field as read-only using js/jquery

I have a requirement like, when the end user clicks on the list of users, then an input text field should get populated. the input field should be non-editable.
lets say the input field value is "{!userText}"
I want to make a field read only. When i make it as disabled=true. It is not transferring the value to the controller class.
This input text field will receive value from JSON generator on windows load. I want the end user to click on any one of the list of users displayed.

Here is the script:

function addLoadEvent(func)
{
    var oldonload = window.onload;
    if (typeof window.onload != 'function')
    {
        window.onload = func;
    }
    else
    {
        window.onload = function() 
        {
            if (oldonload)
            {
                oldonload();
            }
            func();
        }
    }
}

addLoadEvent(function()  
{
    OfferOptions();
});

function reimburseDocuments() {
    var userNames = {!documentJson};
    var flag = {!jsFlag};
    return userNames[flag];
}
function OfferOptions() {
    var users = reimburseDocuments();
    var html = '';
    if (users != null) {
        for (var i = 0; i < users.length; i++) {
            html += ''
                    + '<div>[<b> <a href="javascript:PickValue('
                    + i
                    + ');" title="Click to set as \'User Name\'">'
                    + users[i]
                    + '</a> ]</b></div>'
                    ;
        }
    }
    var panel = document.getElementById('p:f:pb:pbs:pbsi:panel');
    panel.innerHTML = html;
}
function PickValue(index) {
    var name = document.getElementById('p:f:pb:pbs:pbsi:name');
    // this field has to be made read-only
    name.value = reimburseDocuments()[index];
}
</script>

Class:

 public String documentJson {
        get {
                //Map<String, List<String>> m = new Map<String, List<String>>();
                Map<Boolean, List<String>> m = new Map<Boolean, List<String>>();
                m.put(jsFlag, getuserNames());
                system.debug('** Map Value ** '+m+'** JSON Value **'+json(m));                
                return json(m);
        }
    }

    // creating JSON generator Object and returning it as String
    private String json(Object o) {
            JSONGenerator generator = JSON.createGenerator(false);
            generator.writeObject(o);
            return generator.getAsString();
    }

Here {!jsFlag} is set to true in constructor. so JSON retrieves value on load (that is list of users). To make that name field "readonly"
But it is not working.

var j$ = jQuery.noConflict();
j$(document).ready(function() {
        var userField = j$(getHtmlId('{!$Component.form.pb.pbs.pbsi.name}'));
        userField.attr('readonly',true);
    }
}); 
function getHtmlId(cid) {
    return "#"+cid.replace(/(:)/g,'\\\\$1');
}