Disable or Enable Button/InputText in ADF by using Javascript

Disabling ADF Faces UI component on the client-side could be tricky sometimes.You basically need to set unsecure="disabled" and clientComponent="true". But if you use button.setProperty('disabled', true) on a commandButton, your button will still look like undisabled (though it won't invoke action event), proper style class and 'disabled' attribute will not be applied to the button element.
To properly disable button you can use script like this: 


<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <f:view>
    <af:document id="d1">
      <af:resource type="javascript"> 

      function disableField(actionEvent) { 
  
        var nameInputText = actionEvent.getSource().findComponent("nameFld"); 
        nameInputText.setProperty("disabled", true); 
         
        //The following line is for partial refresh, in this case  
        //its taken care by framework 
        //AdfPage.PAGE.addPartialTargets(nameInputText); 
         
       
      } 
  
      function enableField(actionEvent) { 
  
        var nameInputText = actionEvent.getSource().findComponent("nameFld"); 
        nameInputText.setProperty("disabled", false); 
       
      } 
      function setButtonDisabled(actionEvent) {
        var button = actionEvent.getSource().findComponent("submitButton"); 
            button.setProperty('disabled', true);
            AdfDomUtils.addOrRemoveCSSClassName(true,
                AdfRichUIPeer.getDomElementForComponent(button),
                AdfRichUIPeer.DISABLED_STYLECLASS);
            var buttonDom = button.getPeer().getButtonElement(button);
           
                buttonDom.setAttribute('disabled', 'disabled');
                  
        }
   
   
      function setButtonEnabled(actionEvent) {
        var button = actionEvent.getSource().findComponent("submitButton"); 
            button.setProperty('disabled', false);
            AdfDomUtils.addOrRemoveCSSClassName(false,
                AdfRichUIPeer.getDomElementForComponent(button),
                AdfRichUIPeer.DISABLED_STYLECLASS);
            var buttonDom = button.getPeer().getButtonElement(button);
           
           
                buttonDom.removeAttribute('disabled');
                  
        }
   
   
     </af:resource> 
     <af:form id="f1"> 
       <af:panelGroupLayout id="pgl1"> 
         <af:commandButton text="Disable Name Field" id="disableBtn" clientComponent="true" unsecure="disabled"
                  > 
       <af:clientListener type="action" method="setButtonDisabled"/>     
         </af:commandButton> 
         <af:commandButton text="Enable Name Field" id="enableBtn" clientComponent="true" unsecure="disabled"
                  > 
           <af:clientListener type="action" method="setButtonEnabled"/> 
         </af:commandButton> 
      
       <af:inputText unsecure="disabled" clientComponent="true" label="Name" id="nameFld"/> 
       <af:commandButton disabled="true" text="Submit" id="submitButton" clientComponent="true" unsecure="disabled">
      
       </af:commandButton>
     </af:panelGroupLayout> 
     </af:form> 

    </af:document>
  </f:view>
</jsp:root>



unsecure:

 A whitespace separated list of attributes whose values ordinarily can be set only on the server, but need to be settable on the client. Currently, this is supported only for the "disabled" attribute. Note that when you are able to set a property on the client, you will be allowed to by using the the .setProperty('attribute', newValue) method, but not the .setXXXAttribute(newValue) method. For example, if you have unsecure="disabled", then on the client you can use the method .setProperty('disabled', false), while the method .setDisabled(false) will not work and will provide a javascript error that setDisabled is not a function.

clientComponent:

 whether a client-side component will be generated. A component may be generated whether or not this flag is set, but if client Javascript requires the component object, this must be set to true to guarantee the component's presence. Client component objects that are generated today by default may not be present in the future; setting this flag is the only way to guarantee a component's presence, and clients cannot rely on implicit behavior. However, there is a performance cost to setting this flag, so clients should avoid turning on client components unless absolutely necessary.