[SalesForce] Visualforce Page Gray out/disable(?) field based off another field

I have a picklist and I want a specific value to render two date fields and another picklist field unable to be edited, or "grayed out". How do I accomplish this?

EDIT

            <apex:inputField value="{!contractItem.Contract_Type__c}" onchange="changeVar()" tabOrderHint="40"/>
            <apex:inputField value="{!contractItem.Contract_Start_Date__c}" tabOrderHint="41"/>
            <apex:inputField value="**{!contractItem.Service_Frequency__c}**" tabOrderHint="47"/>
            <apex:inputField value="**{!contractItem.Billing_Frequency__c}**" tabOrderHint="47"/>
            <apex:inputField value="{!contractItem.Service_Date_Time__c}" tabOrderHint="42"/>
            <apex:inputField value="{!contractItem.Contract_Term_months__c}" tabOrderHint="48"/>
            <apex:inputField value="{!contractItem.Requested_First_Service__c}" tabOrderHint="43"/>

The bolded are disabled. Here is the controller

    public void changeVar(){
    if(contractItem.Contract_Type__c == 'Wood Boring Insect'){
        contractItem.Contract_Term_months__c = 0;
    }
}

Best Answer

You could bind the disabled attribute of the field to an expression and change it to true onchange of the picklist.

e.g. (VF page)

<apex:outputPanel id='panel'>
    <apex:actionFunction name='changeVar' action='{!changeVar}' rerender='panel'/>
    <apex:selectList value='{!valueVar}' onchange='changeVar()'>
        <apex:selectOptions value='{!items}'/>
    <apex:selectList>
    <apex:inputField value='{!inputVal}' html-disabled='{!disabledVar}'/>
</apex:outputPanel>

Controller code:

public void changeVar(){
    if(valueVar == 'SOME VALUE'){
        disabledVar = true;
    }
}

Another option is using some JS to do it:

<apex:selectList value='{!valueVar}' onchange='changeVar(event)'>
        <apex:selectOptions value='{!items}'/>
<apex:selectList>
<apex:inputField value='{!inputVal}' id='inputToDisable'/>

<script>
    function changeVar(e){
        if(e.target.value == 'SOME VALUE'){
            document.querySelectorAll(input[id$=inputToDisable]")[0].disabled = true;
        }
    }
</script>

Hope this helps!

Related Topic