function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
PS81PS81 

Visualforce - Jquery initialise

Hi

I'm using Jquery to handle the checkbox event to enable and disable the fields in visualforce page. Now i want to disable the fields by default when the edit page is loaded. how can i acheive this by using jquery?
 
my code is below:

<apex:page standardController="Product2" tabStyle="Product2" extensions="ProductSave" >
<apex:sectionHeader title="Product Edit" subtitle="{!Product2.name}"/>
<font style="font-family: Arial; font-size: 10pt;">Enter product details. Mark products as Active if you want them to be added to price books, opportunities, or quotes. </font> <br/><br/>
<apex:includescript value="{!URLFOR($Resource.jquery, 'js/jquery-1.11.3.js')}" />
<script>
       initialize();
</script>
<script>
function initialize(){
alert("r");
}

function handlefld(input, textid){   
    if (!input.checked){
      jQuery( 'input[id$=prodjan_c]' ).prop('disabled', true);
      jQuery( 'input[id$=prodfeb_c]' ).prop('disabled', true);
      jQuery( 'input[id$=prodmar_c]' ).prop('disabled', true);
      jQuery( 'input[id$=prodapr_c]' ).prop('disabled', true);
      jQuery( 'input[id$=prodmay_c]' ).prop('disabled', true);
      jQuery( 'input[id$=prodjun_c]' ).prop('disabled', true);
      jQuery( 'input[id$=prodjul_c]' ).prop('disabled', true);
      jQuery( 'input[id$=prodaug_c]' ).prop('disabled', true);
      jQuery( 'input[id$=prodsep_c]' ).prop('disabled', true);
      jQuery( 'input[id$=prodoct_c]' ).prop('disabled', true);
      jQuery( 'input[id$=prodnov_c]' ).prop('disabled', true);
      jQuery( 'input[id$=proddec_c]' ).prop('disabled', true);
      }
    else{
      jQuery( 'input[id$=prodjan_c]' ).prop('disabled', false);
      jQuery( 'input[id$=prodfeb_c]' ).prop('disabled', false);
      jQuery( 'input[id$=prodmar_c]' ).prop('disabled', false);
      jQuery( 'input[id$=prodapr_c]' ).prop('disabled', false);
      jQuery( 'input[id$=prodmay_c]' ).prop('disabled', false);
      jQuery( 'input[id$=prodjun_c]' ).prop('disabled', false);
      jQuery( 'input[id$=prodjul_c]' ).prop('disabled', false);
      jQuery( 'input[id$=prodaug_c]' ).prop('disabled', false);
      jQuery( 'input[id$=prodsep_c]' ).prop('disabled', false);
      jQuery( 'input[id$=prodoct_c]' ).prop('disabled', false);
      jQuery( 'input[id$=prodnov_c]' ).prop('disabled', false);
      jQuery( 'input[id$=proddec_c]' ).prop('disabled', false);
      }
}
</script>
<apex:form >
<body>
    <apex:pageBlock title="Product Edit" mode="edit"  >
        <apex:pageBlockButtons >
            <apex:commandButton action="{!save}" value="Save" />
            <apex:commandButton action="{!Cancel}" value="Cancel"/>
        </apex:pageBlockButtons>
        <apex:pageblocksection title="Product Information" columns="2">
            <apex:inputfield value="{!Product2.name}" id="prodname"/> 
            <apex:inputfield value="{!Product2.Family}" id="prodfamily"/>
            <apex:inputfield value="{!Product2.ProductCode}" id="prodcode"/>
            <apex:inputfield value="{!Product2.IsActive}" id="prodisactive"/> 
            <apex:inputfield value="{!Product2.Opportunity__c}" id="prodoppr" onclick="select()"/>  
            <apex:outputText > </apex:outputText>
            <apex:inputfield value="{!Product2.Description}" id="proddescr" style="width:500px ; height:100px"  />            
        </apex:pageblocksection>
         <apex:pageblocksection title="Weightage" columns="4">   
            <input id="edit" type="checkbox" onclick="handlefld(this,'{!$Component.prodfeb_c}');"/>
            <label for="edit">Edit ?</label>
            <apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem ></apex:pageBlockSectionItem>                        
            <apex:inputfield value="{!Product2.January__c}" id="prodjan_c"/>
            <apex:inputfield value="{!Product2.February__c}" id="prodfeb_c"/>
            <apex:inputfield value="{!Product2.March__c}" id="prodmar_c"/>
            <apex:inputfield value="{!Product2.April__c}" id="prodapr_c"/> 
            <apex:inputfield value="{!Product2.May__c}" id="prodmay_c"/> 
            <apex:inputfield value="{!Product2.June__c}" id="prodjun_c"/>  
            <apex:inputfield value="{!Product2.July__c}" id="prodjul_c"/>
            <apex:inputfield value="{!Product2.August__c}" id="prodaug_c"/>
            <apex:inputfield value="{!Product2.September__c}" id="prodsep_c"/>
            <apex:inputfield value="{!Product2.October__c}" id="prodoct_c"/> 
            <apex:inputfield value="{!Product2.November__c}" id="prodnov_c"/> 
            <apex:inputfield value="{!Product2.December__c}" id="proddec_c"/>              
            <apex:outputText > </apex:outputText>         
        </apex:pageblocksection>        
    </apex:pageBlock>
</body>
</apex:form>
</apex:page>
 
Best Answer chosen by PS81
Miroslav SmukovMiroslav Smukov
Hi,

Try adding the following code in your <script> tag instead of "initialize();";
 
<script>
    	$( document ).ready(function(){
            alert('Page fully loaded'); //comment this out after testing
            //call your method that disables the fields
            });
</script>