What I'm trying to do is dynamically enable and disable an apex commandButton depending on whether a checkbox is checked or unchecked. The commandButton is starting in a disabled state, and if I check the checkbox I want to enable the commandButton. What happens is that the commandButton does in fact become enabled (if I click it, the form is submitted), but visually the commandButton still appears to be disabled. However if I do the same thing with a regular input button, everything works fine -- ie the input button appears enabled when enabled and disabled when disabled.  Below is a very simple VF page that demonstrates the problem.

<apex:page sidebar="false"> 

<apex:form >   

<apex:pageBlock >     

<apex:pageBlockButtons id="buttonBlock" location="top">       

<apex:commandButton id="myCmdButton" value="Disabled Apex Command Button" disabled="true"/>       

<input id="myButton" type="button" value="Disabled Input Button" disabled="true"></input>       

<input id="myCheckbox" type="checkbox" onclick="cbxOnClick()">Enable Buttons</input>       

<script>           

var cmdBtn = document.getElementById('{!$Component.myCmdButton}');           

var btn = document.getElementById('myButton');           

var cbx = document.getElementById('myCheckbox');                                     

function cbxOnClick() {           

btn.disabled=!cbx.checked;               

btn.value=(cbx.checked? "Enabled Input Button":"Disabled Input Button");               

cmdBtn.disabled=!cbx.checked;               

cmdBtn.value=(cbx.checked? "Enabled Apex Command Button":"Disabled Apex Command Button");           

}                                                                                                 

</script>     

</apex:pageBlockButtons>   

</apex:pageBlock>         

</apex:form>       

</apex:page>