Hide multiple input fields conditionally

Question

I have incident report. If the user types in 3, 3 rows appear to describe each incident.

The two columns to the write of the page, "Employee" and "Opportunity (Patient)". I want neither of the fields to display if the "Affected Population" value in the row is selected to "--None---",

Only the employee field to display if "Affected Population" value in the row is set to "Employee",

etc

Here is the visualforce code for those Affected Population and two columns on the right

<!--Infection Incidents Section -->         
<apex:pageBlockSection title="Infection Incidents : {!InfectionCount}" columns="1" id="infecIncidentsec" showHeader="false"> 

<apex:pageBlockTable style="width:100%" value="{!Infections}" var="item" rendered="{!Infections.size > 0}">  

 <apex:column style="width:11%;" headerValue="Date of Incident">  
     <apex:inputField value="{!item.DateOfIncident__c}" required="true"/> 
 </apex:column> 

 <apex:column style="width:11%;" headerValue="Affected Population">  
     <apex:inputField value="{!item.Affected_Population__c}" required="true" onchange="showFields(this)" styleClass="affecPopulateList">
         <apex:actionSupport event="onchange" rerender="colEmp, colOpp"/>
     </apex:inputField>
 </apex:column>

 <apex:column style="width:11%;" headerValue="Infected on Admission">
             <apex:OutputPanel layout="block" styleClass="requiredInput infecInItem patient" >
                 <span>
                     <apex:OutputPanel styleClass="requiredBlock"/>
                     <apex:inputField value="{!item.Infection_Present_on_Admission__c}" styleClass="infecInInputItem patientinfecInInputItem infecRequired"/>
                     <div class="errorMsg" style="display:none">
                         <strong></strong>
                         You must enter a value.
                     </div>
                 </span>
             </apex:OutputPanel> 
 </apex:column>


 <apex:column style="width:11%"  headerValue="Employee" id="colEmp">  
             <apex:OutputPanel layout="block" styleClass="requiredInput infecInItem employee" >
                 <span>
                     <apex:OutputPanel styleClass="requiredBlock" />
                     <apex:inputField style="width:80%"  value="{!item.Employee__c}" styleClass="infecInInputItem employeeinfecInInputItem infecRequired" rendered="{!item.Affected_Population__c == 'Employee' }"/>
                     <div class="errorMsg" style="display:none">
                         <strong></strong>
                         You must enter a value.
                     </div>
                 </span>
             </apex:OutputPanel>                               
 </apex:column>

 <apex:column style="width:56%;" headerValue="Opportunity (Patient)" id="colOpp">  
             <apex:OutputPanel layout="block" styleClass="requiredInput infecInItem patient" >
                 <span>
                     <apex:OutputPanel styleClass="requiredBlock"/>
                     <apex:inputField style="width:15%" value="{!item.Opportunity__c}" styleclass="infecInInputItem patientinfecInInputItem infecRequired" rendered="{!item.Affected_Population__c != '' }"/>
                     <div class="errorMsg" style="display:none">
                         <strong></strong>
                         You must enter a value.
                     </div> 
                 </span>
             </apex:OutputPanel>                               
 </apex:column>

I know there is a rendered property for the apex:column component, but my if statement doesn't appear to be working

rendered="{! If(item.Affected_Population__C == "Employee",true,false) }"

Answer 1

Your rendered args needs to be on the input fields. Also, you haven't shown us the onchange args in the 'Affected Population' field.

So I made some assumptions and wrote this (using Contact object, you can change to suit...)

<apex:page standardController="Contact" extensions="Test1" sidebar="true" showHeader="true">
    <apex:form >

    <apex:pageBlock >
        <apex:pageBlockSection columns="1" showHeader="false">

            <apex:pageBlockTable value="{!contacts}" var="o">

                <apex:column headerValue="Date of Incident">
                    <apex:inputField value="{!o.Date_of_Incident__c}" />
                </apex:column>

                <apex:column  headerValue="Affected Population" >
                    <apex:inputField value="{!o.Affected_Population__c}">
                        <apex:actionSupport event="onchange" rerender="colEmp,colOpp" />
                    </apex:inputField>
                </apex:column>

                <apex:column headerValue="Infected on Admission" >
                    <apex:inputField value="{!o.Infected_on_Admission__c}" />
                </apex:column>

                <apex:column headerValue="Employee" id="colEmp">
                    <apex:inputField value="{!o.Employee__c}" rendered="{!o.Affected_Population__c == 'Employee'}" />
                </apex:column>

                <apex:column headerValue="Opportunity (Patient)" id="colOpp">
                    <apex:inputField value="{!o.Opportunity_Patient__c}" rendered="{!o.Affected_Population__c != ''}" />
                </apex:column>

            </apex:pageBlockTable>
        </apex:pageBlockSection>
    </apex:pageBlock>

    </apex:form>
</apex:page>

Note how the Affected Population input field has the child tag 'actionSupport'. This is where we can define an onchange and rerender events.

When that picklist changes, VF will rerender (recalc and redisplay) the two columns Employee and Opportunity (Patient).

HTH.