You need to sign in to do that
Don't have an account?
KoolAB
Lightning Checkboxes Behaviour in 2 tables on one page is strange
I have created 2 tables on one page in lightning app. Data is fetched using apex server side calls. Data is fetched correctly in 2 tables but
When i Select checkboxes from Table2 checkboxes in Table1 are getting selected This is happening for number of rows that are shown in table1. for example if Table1 has 2 rows then in that case when i check first 2 checkboxes in Table2, Table1 checkboxes are getting selected. HTML for table1 and table2 is mentioned below
When i Select checkboxes from Table2 checkboxes in Table1 are getting selected This is happening for number of rows that are shown in table1. for example if Table1 has 2 rows then in that case when i check first 2 checkboxes in Table2, Table1 checkboxes are getting selected. HTML for table1 and table2 is mentioned below
TABLE 1 <tbody> <aura:iteration items="{!v.RPP}" var="RPP11" indexVar="ind"> <tr class="slds-hint-parent"> <td role="gridcell" class="slds-text-align--right" style="width:3.25rem;"> <span class="slds-checkbox"> <input type="checkbox" checked="{!v.isChecked}" text="{!RPP11.Id}" name="options" id="{!ind}" onchange="{!c.updateCheckboxes}" aura:id="id1" /> <label class="slds-checkbox__label" for="{!ind}"> <span class="slds-checkbox--faux"></span> <!--<span class="slds-form-element__label slds-assistive-text">Select item 1</span>--> </label> </span> </td> <th scope="row"> <div class="slds-truncate" >{!RPP11.Category__c}</div> </th> <td role="gridcell"> <div class="slds-truncate" title="Discount A">{!RPP11.Price__c}</div> </td> </tr> TABLE 2 <tbody> <aura:iteration items="{!v.staticRPP}" var="RPPStat1" indexVar="xcnt"> <tr class="slds-hint-parent"> <td role="gridcell" class="slds-text-align--right" style="width:3.25rem;"> <span class="slds-checkbox"> <input type="checkbox" checked="" text="{!RPPStat1.Id}" name="options1" id="{!xcnt}" aura:id="xid" /> <label class="slds-checkbox__label" for="{!xcnt}"> <span class="slds-checkbox--faux"></span> <!--<span class="slds-form-element__label slds-assistive-text">Select item 1</span>--> </label> </span> </td> <th scope="row"> <div class="slds-truncate" >{!RPPStat1.ProductCategory__c}</div> </th> <td role="gridcell"> <div class="slds-truncate" >{!RPPStat1.Price__c}</div> </td> <td role="gridcell"> <div class="slds-truncate" >{!RPPStat1.Id}</div> </td> </tr>