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

Get the Developer Name for Record Types without SOQL query

Hi, Previously, the developer name was accessible only via SOQL on the RecordType SObject, and not via describe information. Now you can ...