Getting an h:inputbox to become disabled once I checked a h:selectBooleancheckbox

I'm trying to make a "h:selectBooleanCheckbox" component make another h:inputbox become disabled once the checkbox is set to true (checked).

There are a few versions I tried and none succeeded (When I check the box, nothing happens)

Version 1

<f:view>
 <h:form id="MyForm">
  <h:panelGrid id="OutgoingMailPanel" styleClass="subConfigurationPanel">
   <h:panelGrid columns="1">
    <h:outputText styleClass="propertyName" value='Password' />
    <h:outputText styleClass="properyDescription" value='Password for the incoming开发者_StackOverflow中文版 mail server' />
    <h:inputText id="OutGoingMail" styleClass="propertyInput" value="#{email.currentOutgoingMailPassword[0]}" />
   </h:panelGrid>
   <h:panelGrid columns="1">

    <h:panelGroup>
     <h:selectBooleanCheckbox value="#{email.currentUsePasswordSameAsIncoming[0]}" 
     onclick="document.getElementById('MyForm:OutGoingMail).disable = !this.checked" />
     <h:outputText styleClass="propertyName" value='Outgoing Password Same As Incoming.' />
    </h:panelGroup>
   </h:panelGrid>
  </h:panelGrid>
 </h:form>
</f:view>

Version 2

<f:view>
 <h:form id="MyForm">
  <h:panelGrid id="OutgoingMailPanel" styleClass="subConfigurationPanel">
   <h:panelGrid columns="1">
    <h:outputText styleClass="propertyName" value='Password' />
    <h:outputText styleClass="properyDescription" value='Password for the incoming mail server' />
    <h:inputText id="OutGoingMail" styleClass="propertyInput" value="#{email.currentOutgoingMailPassword[0]}"
     disabled="#{email.currentUsePasswordSameAsIncoming[0]}"/>
   </h:panelGrid>
   <h:panelGrid columns="1">

    <h:panelGroup>
     <h:selectBooleanCheckbox value="#{email.currentUsePasswordSameAsIncoming[0]}" >
      <a4j:support event="onclick" rerender="OutGoingMail">
     </h:selectBooleanCheckbox>
     <h:outputText styleClass="propertyName" value='Outgoing Password Same As Incoming.' />
    </h:panelGroup>
   </h:panelGrid>
  </h:panelGrid>
 </h:form>
</f:view>

Both version don't work for the same reason - nothing happends when I check the box. Any Ideas? (Working with Jsf1.2, myfaces, richfaces)

Thanks!

In your version1 modify code as

document.getElementById('MyForm:OutGoingMail').disabled = this.checked

In version 2, rerender should be reRender