Friday, 1 May 2015

Enable and disable inputFields in visualforce page using jQuery

Hi,

A simple visualfoce page which contains enable and disable functionality for input fields using jquery.

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:inputField value="{!Account.SLAExpirationDate__c}" id="slaexpdate"/>
            </apex:pageBlockSection>  
            <apex:pageBlockButtons location="bottom">
                <apex:commandButton value="Save" action="{!save}"/>
            </apex:pageBlockButtons>  
        </apex:pageBlock>  
    </apex:form>
    <script>
        $(document).ready(function(){
            $("[id$=type]").change(function(){
                if(this.value=="Other"){
                        $("[id$=Phone]").val("");
                        $("[id$=actNumber]").val("");
                        $("[id$=industry]").val("");
                        $("[id$=anualReven]").val("");
                        $("[id$=slaexpdate]").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);
                        $("[id$=slaexpdate]").prop("disabled",true);
                }
                else{
                      $("[id$=Phone]").prop("disabled",false);
                        $("[id$=actNumber]").prop("disabled",false);
                        $("[id$=industry]").prop("disabled",false);
                        $("[id$=anualReven]").prop("disabled",false);
                        $("[id$=slaexpdate]").prop("disabled",false);
                }              
            });
        });
    </script>
</apex:page>

Output:
---------
When Account Type "Other" we are disabling the fields as shown below.


 When Account Type is not "Other" we are enabling the fields as shown below.








1 comment:

  1. what about lookup relation if am selecting one record and i want to access one field from that lookup if its true then field which is present on vf page get enable disable according to situations.

    ReplyDelete

Differences between Agentforce for Service and Einstein Bots

 Hi , There are a few differences between Agentforce for Service and Einstein Bots. Agentforce vs. Einstein Bots ...