How to make <apex:inputText> field as read-only using js/jquery

Question

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');
}    

Answer 1

As you say, setting the html input to be disabled stops the value being returned to the page. This isn't Force.com behaviour as such, but HTML / browser behaviour. There is another attribute readonly that you can set true which should mean the field can't be edited but the value of the field is sent back to the server.

You can set this attribute as a pass-through on a field in VisualForce like:

<apex:inputText value="{!Account.Name}" html-readonly="true" />

Answer 2

Or you can always use disabled="true" like this

<apex:InputText label="User ID" value="{!formattedId}" disabled="true" />