I am trying to render a component as read-only or editable based on a check-box value. The code I have used is given below.

<apex:pageBlockSection title="Relation Iformation" columns="2" id="information">
            <apex:inputField value="{!kpiRelation.KPI_Library__c}">       
                <apex:actionSupport event="onchange" action="{!UpdatePageWithKPI}" oncomplete="RenderPanels()" reRender="pageBlock" />
            <apex:inputField label="Edit KPI Treshold?" value="{!kpiRelation.Edit_KPI__c}" rendered="{!kpiRelation.KPI_Library__c != ''}" id="editKpi" onchange="RenderConditions(this)"/>

In the above code the Edit KPI threshold is a check box value. I have the below JavaScript to capture the check box value.

function RenderConditions(data) {       
        var checkBox = {!kpiRelation.Edit_KPI__c};             
        if(data != '')
            alert('The edit kpi -- '+data.value);
        if (data == 1){
            document.getElementById('{!$Component.pageBlock.condtNum}').style.display ='block';
            document.getElementById('{!$Component.pageBlock.condtNum}').style.display ='none';            

But when I change the value, the value I am selecting is not getting updated in the script. Can anyone tell me what I am doing wrong here?

  • Check individually if document.getElementById('{!$Component.pageBlock.condtNum}') is giving any value back – Kaushik Ray Aug 6 '15 at 6:59
  • I am not getting the value of document.getElementById('{!$Component.pageBlock.condtNum}'). Moreover i have used the same expressions in different parts of the code and the component is rendered there. – user3197916 Aug 6 '15 at 7:02
  • Is there a component in your visualforce page with the id condtNum? – martin Aug 6 '15 at 7:03
  • What is this variable supposed to be doing?: var checkBox = {!kpiRelation.Edit_KPI__c}; – martin Aug 6 '15 at 7:07
  • There is a component by the name. – user3197916 Aug 6 '15 at 7:07

Instead of using:

alert('The edit kpi -- '+data.value);

you would check like it:

alert('The edit kpi -- '+data.checked); // return true or false
  • Thanks a lot... That helped solve it in a really simple manner. – user3197916 Aug 6 '15 at 7:08

I assume you want to use


rather than


to access the input field/.?

  • i am trying to render the document.getElementById('{!$Component.pageBlock.condtNum}'). But the condition to render is got from document.getElementById('{!$Component.pageBlock.editKpi}') – user3197916 Aug 6 '15 at 7:09
  • so you want to say "condtNum" works but not editKpi? In that case add please add complete code where both he components are used – Kaushik Ray Aug 6 '15 at 8:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.