TehNrd

Visualforce as a whole is great and is super easy to use once you get the hang of it but every once in a while I come across an issue that makes me go, “What the huh?”. A perfect example of this is that fact that there is no attribute to disable apex:inputFields in Visualforce, what the huh?!? Exactly. You can disable apex:inputText but not apex:inputFields. This can be frustrating as inputFields give you enhanced functionality such as the date picker for date fields, help hovers, and cleaner error messages.

So how can you disable an apex:inputField tag? I don’t know. Just kidding ;-P. Nearly all apex:inputFields when rendered for the browser become HTML input tags and input tags have a disabled attribute. What we can do is manipulate this value with a combination of Apex and Javascript.

Check out the working demo here.

For all my demos I am now trying to build packages so you can install them in your own orgs to play around with. The package is available here.

First is a very simple class. It has one Opportunity that we will bind our inputFields to, a Boolean to determine if the inputField should be disabled, and two methods to set the boolean to true and false.

public class disableInputField {
 
    public Opportunity opp {get; set;}
    public Boolean disableInput {get; set;}
 
    public disableInputField(){
        opp = new Opportunity();
    }
 
    public void disableCloseDateInput(){
        disableInput = true;
    }
 
    public void enableCloseDateInput(){
        disableInput = false;
    }
}

Next up is the page. What we do is place some inline Javascript right next to the input field we want to disable. When clicking the Enable/Disable buttons this will set the boolean value and rerender the oppName panel. When this happens the disableInput boolean value is merged in to the Javascript and since this is a inline Javascript statement it will execute every time the rerender is performed.

<apex:page controller="disableInputField">
    <apex:form >
        <apex:commandButton value="Disable inputField" action="{!disableCloseDateInput}" rerender="oppName"/>
        <apex:commandButton value="Enable inputField" action="{!enableCloseDateInput}" rerender="oppName"/><br/><br/>
 
        Opportunity Name:
        <apex:outputPanel id="oppName">
            <apex:inputField value="{!opp.CloseDate}" id="oppNameInput" required="false"/>
            <script>document.getElementById('{!$Component.oppNameInput}').disabled = {!disableInput}; </script>
        </apex:outputPanel>
    </apex:form>
</apex:page>

And that is how you can disable an inputField. Nice!