Thursday, 28 January 2016

Disable Picklist field based on another picklist Value using JQuery In Visualforce


Sometime we want to disable picklist field based on another picklist field value like below.



In the above we can see if the Account Type is Partner then Industry Vertical (Picklist Field) is disable this can be achieved using below code.


<apex:page sidebar="false" standardController="Account">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection columns="1">
                <apex:inputField value="{!Account.Name}"/>
                <apex:inputField value="{!Account.Type}" id="type"/>
                <apex:inputField value="{!Account.Phone}" id="Phone"/>
                <apex:inputField value="{!Account.AccountNumber}" id="actNumber"/>
                <apex:inputField value="{!Account.Industry}" id="industry"/>
                <apex:inputField value="{!Account.AnnualRevenue}" id="anualReven"/>
                 
            </apex:pageBlockSection>   
            <apex:pageBlockButtons location="bottom">
                <apex:commandButton value="Save" action="{!save}"/>
            </apex:pageBlockButtons>   
        </apex:pageBlock>   
    </apex:form> 
    <script>
        $(window).load(function(){
            $("[id$=type]").change(function(){
                if(this.value=="Partner"){
                        $("[id$=Phone]").val("");
                        $("[id$=actNumber]").val("");
                        $("[id$=industry]").val("");
                        $("[id$=anualReven]").val("");
                      
                        $("input[id$=Phone]").prop("disabled",true);                       
                       $("[id$=Phone]").prop("disabled",true);
                        $("[id$=actNumber]").prop("disabled",true);
                        $("[id$=industry]").prop("disabled",true);
                        $("[id$=anualReven]").prop("disabled",true);
                      
                }
                else{
                      $("[id$=Phone]").prop("disabled",false);
                        $("[id$=actNumber]").prop("disabled",false);
                        $("[id$=industry]").prop("disabled",false);
                        $("[id$=anualReven]").prop("disabled",false);
                       
                }               
            });
        });
    </script>
</apex:page>

No comments:

Post a Comment

Tools for Lightning Web Component Development

 Below are the tools required for Web Component Development 1. Chrome Browser (Prefered) You can download it from Google 2. Visual Studio Co...