0

I am working on one vf Page where I have two check boxes for each row, so if I check one checkbox then other should be unchecked. I mean in one row,I can select only one check. enter image description here

In above screenshot if I select approved then rejected should get unchecked and vice versa.

My vf page code is below.

<apex:page controller="ApproveTimeSheetController" lightningStylesheets="true">


<style type="text/css">

    .inputcell {width:80px;text-align:center;}

    .myFormStyle {
        background-color:#7492B1;
    }



    #customers {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 100%;
    } 

    #customers td, #customers th {
      border: 1px solid #ddd;
      padding: 4px;
    }

    #customers tr:nth-child(even){background-color: #eaebef;}
    #customers tr {
        height: 40px;
    }
    #customers tr:hover {background-color: #ddd;}

    #customers th {
      padding-top: 5px;
      padding-bottom: 5px;        
      background-color: #a9c2d6;
      color: white;
    }


</style>


<apex:form id="timesheetform" styleclass="myFormStyle" rendered="{!!PageInError}">


    <apex:slds />

    <div style="padding: 20px;" >


        <div class="slds-page-header">
            <div class="slds-page-header__row">

                <div class="slds-page-header__col-title">
                    <div class="slds-media">
                        <div class="slds-media__figure">
                            <span class="slds-icon_container slds-icon-standard-opportunity" title="Approve Timesheet">
                                <svg class="slds-icon slds-page-header__icon" aria-hidden="true">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#work_type_group" />
                                </svg>
                                <span class="slds-assistive-text">Forecast</span>
                            </span>
                        </div>
                    <div class="slds-media__body">
                        <div class="slds-page-header__name">
                            <div class="slds-page-header__name-title">
                                <h1><span class="slds-page-header__title slds-truncate">{!Title}</span></h1>
                            </div>
                        </div>
                        <p class="slds-page-header__name-meta">Approve Timesheets</p>
                    </div>
                    <br/>
                     <a href="/{!ParameterId}">Back to Project</a>
                </div>
            </div>
            </div>
        </div>

        <br/>

        <apex:pageBlock title="Date Selection" id="DateSelection">

            <table width="100%">
                <COLGROUP width="40%"></COLGROUP>
                <COLGROUP width="40%"></COLGROUP>

                <tr>
                    <td><apex:outputLabel value="Week Start" />&nbsp;&nbsp;<apex:inputField value="{!fakeWeek1.Week_Start_Date__c}" /></td>
                    <td ><apex:commandButton action="{!Previous}" value="<<"/>&nbsp;&nbsp;<apex:commandButton value="Refresh" action="{!Refresh}"/> &nbsp;&nbsp;<apex:commandButton action="{!Next}" value=">>" /></td>


                </tr>
            </table>
        </apex:pageBlock>

        <br/>

        <apex:repeat value="{!TimeSheetsByMembers}" var="member">
            <apex:pagemessages id="ErrorMessages" />  
            <apex:pageBlock title="{!member.TeamMemberName} ({!member.Role})">
                <apex:outputpanel rendered="{!member.NoTimeThisWeek}">
                   <div style="color:red;"><b>NO TIMESHEET ENTRIES FOR THIS WEEK</b></div>
                </apex:outputpanel>
                <apex:outputpanel id="Timesheets" rendered="{!not(member.NoTimeThisWeek)}">
                    <table padding="30px;">
                        <tr><td  style="text-align:right;">  

                            <apex:commandButton value="Approve All" action="{!ApproveAll}" rerender="timesheetform">
                                <apex:param name="index" value="{!member.TeamMemberid}" assignTo="{!SelectedMemberId}"/>
                            </apex:commandButton>
                        </td></tr>
                    </table>
                    <br/>
                    <table padding="10px;" id="customers">
                        <COLGROUP width="7%"></COLGROUP>
                        <COLGROUP width="12%"></COLGROUP>    
                        <COLGROUP width="12%"></COLGROUP>    
                        <COLGROUP width="7%"></COLGROUP> 
                        <COLGROUP width="5%"></COLGROUP>
                        <COLGROUP width="20%"></COLGROUP>
                        <COLGROUP width="5%"></COLGROUP>
                        <COLGROUP width="5%"></COLGROUP>
                        <COLGROUP width="20%"></COLGROUP>
                        <COLGROUP width="15%"></COLGROUP>

                        <!--headers-->

                        <tr class="dbrow">
                            <th>Date</th>
                            <th style="text-align:center;">Function</th>
                            <th style="text-align:center;">Type of Work</th>
                            <th style="text-align:center;">Hours</th>
                            <th style="text-align:center;">Billable</th>
                            <th>Comments</th> 
                            <th style="text-align:center;">Approved</th>
                            <th style="text-align:center;">Rejected</th>
                            <th>Rejected Comments</th>
                            <th>Click to Edit</th>
                        </tr>    
                        <apex:repeat value="{!member.Times}" var="time"> 
                            <tr>
                                <td><apex:outputText value="{!time.TimeDate}"/></td>
                                <td style="text-align:center;"><apex:outputText value="{!time.timerecord.Function__c}"/></td>
                                <td style="text-align:center;"><apex:outputText value="{!time.timerecord.Type_of_Work__c}"/></td> 
                                <td style="text-align:center;"><apex:outputText value="{!time.timerecord.Hours__c}"/></td>
                                <td style="text-align:center;"><apex:outputText value="{!time.timerecord.Billable__c}"/></td>
                                <td><apex:outputText value="{!time.timerecord.Comments__c}"/></td>   
                                <td style="text-align:center;">
                                    <apex:inputcheckbox id="apprvchk" value="{!time.Approved}">

                                    </apex:inputcheckbox> 

                                </td>  
                                <td style="text-align:center;">
                                    <apex:inputcheckbox id="rejectchk" value="{!time.Rejected}">

                                    </apex:inputCheckbox>
                                </td>  
                                <td><apex:inputText value="{!time.timerecord.Rejected_Comments__c}"/></td>  
                                <td><apex:outputlink value="/{!time.timerecord.Id}" target="_blank">{!time.timerecord.name}</apex:outputlink></td>  
                            </tr>

                        </apex:repeat>

                    </table>
                    <br/>
                     <table padding="30px;">

                        <tr><td style="text-align:right;">
                            <apex:actionStatus id="submitstatus">
                                <apex:facet name="start"> 
                                     <img style="opacity:1.0;" src="{!$Resource.SavingGif}"/>
                                </apex:facet>
                            </apex:actionStatus>   
                            &nbsp;&nbsp;
                            <apex:commandButton value="Submit" action="{!SaveCheckboxes}" rerender="Timesheets,ErrorMessages" status="submitstatus">
                                  <apex:param name="index2" value="{!member.TeamMemberid}" assignTo="{!SelectedMemberId}"/>
                            </apex:commandButton>
                        </td></tr>
                    </table>
                </apex:outputpanel>
            </apex:pageBlock>        


        </apex:repeat>


    </div>

</apex:form> 

  • Did you con't use apex:selectCheckboxes? – nubie Feb 20 at 10:41
0

You can try with some Jqeury ..

$('input[type="checkbox"]').on('change', function() {
  $('input[type="checkbox"]').not(this).prop('checked', false);
});
  • Hi Avinash, thanks for the reply. Can you help me where I can write the javascript code, I am not that much good in javascript. Can you help me out if possible. – user61203 Feb 20 at 10:33

Your Answer

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