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
    – SEuser
    Aug 6, 2015 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. Aug 6, 2015 at 7:02
  • Is there a component in your visualforce page with the id condtNum?
    – martin
    Aug 6, 2015 at 7:03
  • What is this variable supposed to be doing?: var checkBox = {!kpiRelation.Edit_KPI__c};
    – martin
    Aug 6, 2015 at 7:07
  • There is a component by the name. Aug 6, 2015 at 7:07

2 Answers 2


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. Aug 6, 2015 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}') Aug 6, 2015 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
    – SEuser
    Aug 6, 2015 at 8:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .