how to disable a multiselect picklist field (inputField) using javascript?

Question

I need to disable a multi select picklist field (inputField) in the visualforce page on page load and enable it on button click.

I tried using javascript. It worked fine for other inputFields but did work out for multi select picklist field.

JS Code i used is below

function onPageLoad(){
        document.getElementById('page:frm:pb:pbs:test').readOnly = true;     
}
window.onload = onPageLoad;
    function onEdit(){
        document.getElementById('page:frm:pb:pbs:test').readOnly = false;    
    }

Answer 1

Try this i am sure this will work for you.

function onPageLoad(){
    document.getElementById('page:frm:pb:pbs:test__unselected').disabled = true;
    document.getElementById('page:frm:pb:pbs:test__selected').disabled = true;  
}
window.onload = onPageLoad;
function onEdit(){
    document.getElementById('page:frm:pb:pbs:test__unselected').disabled = false;
    document.getElementById('page:frm:pb:pbs:test__selected').disabled = false; 
}

Answer 2

I accomplished this via a little bit of jQuery, here is where I'm setting up some inputfields (should be workable with a single element too):

<apex:repeat value="{!fsList}" var="f">
    <apex:inputField id="inputFld" styleClass="inputFld" value="{!sobjectRecord[f]}"/>
</apex:repeat>

At the bottom I set this up:

<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" />
<script>
var j$ = jQuery.noConflict();
j$(document).ready(function(){
    j$('.inputFld').prop('disabled',{!fldsDisabled});});
</script>

This approach worked very nicely. I have boolean within my controller that I'm able to dynamically enable/disable when the edit button is clicked it is set to false.