I want to make a list of data in visualforcepage that when value of field finance support is No, Then Other Field (Support Type, condition, condition note, amount support 1, ammount support 2) is disabled = true, and if value of field finance support is 'Yes' than all the field is disabled = false.. i want to make it dynamic using javascript, because if i set condition in field rendered{!field with condition} its only triggered when i click button save.

How to make it using javascript? and each row can have different value (exampe row 1 finance support is 'No', row 2 finance support is 'Yes')

This is my code now, really need your help guys, thankyou

 <apex:form id="mainFormId">
        <pbe:PageBlockTableEnhancerADV targetPbTableIds="tableDetail" pageSizeOptions="10,50,100,200" defaultPageSize="50" enableExport="false"/>
        <apex:pageMessages id="msgId"/>
        <apex:pageBlock id="pgBId" mode="inlineEdit" title="Update Diskonto for Delivery Request">
            <apex:pageBlockTable value="{!lstDel}" var="a" id="tableDetail" align="top" width="100%">
                <apex:column headerValue="Name" width="8%">
                    <apex:outputLink id="ppId" value="/{!a.ID}">{!a.name}</apex:outputLink>
                    <apex:inputField id="sapid" value="{!a.SAP_ID__c}" style="visibility:hidden;display:none;"/>
                <apex:column headerValue="Finance Support" width="8%">
                    <apex:inputField id="material" value="{!a.Finance_Support__c}" style="width:99%;" required="true"/>
                <apex:column headerValue="Support Type" width="5%">
                    <apex:inputField id="st" value="{!a.Support_type__c}" style="width:99%;" required="true"/>
                <apex:column headerValue="Condition" width="7%">
                    <apex:inputField id="Condition__c" value="{!a.Condition__c}" style="width:99%;" required="true">
                        <apex:actionSupport event="onchange" rerender="tableDetail"/>   
                <apex:column headerValue="Condition Note" width="7%">
                    <apex:inputField id="pic1" value="{!a.Condition_Note__c}" style="width:99%;" styleClass="conditionNote"/>
                <apex:column headerValue="Amount Support 1" width="7%">
                    <apex:inputField id="pic1phone" value="{!a.Amount_Support_1__c}" style="width:99%;"/>
                <apex:column headerValue="Amount Support 2" width="7%">
                    <apex:inputField id="Amount_Support_2__c" value="{!a.Amount_Support_2__c}" style="width:99%;" required="{!a.Condition__c=='Others'}" styleClass="amountSupport2"/>
            <div style="text-align:center; margin-top:10px;">
                <apex:commandButton value="Save" action="{!Save}" reRender="mainFormId,msgId" onComplete="top.location='/{!strID}';"/>
        <apex:actionstatus startStyleClass="requiredLoaderBG" id="ajaxStatus" />  

1 Answer 1


I am sharing a sample solution, on how you can access the fields which you may want to disable with a certain conditions- VF -

<apex:page controller="ContactData">
        function firstNameHandler(){
            let parentTR = event.target.parentElement.parentElement.parentElement;// to get the row element
            let TR_children = parentTR.children;// to get the td elements of the row
            let TR_2nd_Td_input = TR_children[1].children[0].children[1]; // to get the 2nd td of the row.
            //put conditions as per your need.
            TR_2nd_Td_input.disabled = true; // to disable the input tag of 2nd td.
    <apex:form >
        <apex:pageBlock title="Contacts List" id="contacts_list">
            <apex:pageBlockTable value="{! contacts }" var="ct">
                <apex:column >
                    <apex:inputField  value="{!ct.FirstName}"  style="width:99%;" required="true" onclick="firstNameHandler()"/>
                <apex:column >
                    <apex:inputField  value="{!ct.LastName}" style="width:99%;" required="true" />

Apex -

public class ContactData {
    public List<Contact> getContacts(){
        List<Contact> contactList=new List<Contact>([Select id,Accountid ,FirstName,LastName from Contact]);
        return contactList;

You must log in to answer this question.

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