function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Marcos MartinezMarcos Martinez 

How to conditionally render columns in iteration lightning component

I have a lightning iteration component that shows several information on accounts in a row. One of the columns allows the user to choose a lookup( I use a custom lookup component) value to edit the account. I have another row that has a checkbox. What I am trying to accomplish is if the user clicks the checkbox, the column with the lookup value gets greyed out and is not allowed for editing. I tried to do this with a boolean attribute that gets turned to false if the checkbox is checked and then use an aura if to display the custom lookup component in the column but this ends up disabling the entire column. I need the row to have that column be disabled in THAT specific row is the checkbox in that row is checked. Below is code.
 
<aura:iteration var="account" items="{!v.Accounts}" indexVar="idx">
                    <tr class="slds-hint-parent">
                        <th role="gridcell">
                            <div class="slds-truncate" title="Acc"><a href="{!'/'+ account.Id }" target="_blank" tabindex="-1">{!account.Name}</a></div>
                        </th>
                        <td role="gridcell">
                            <lightning:layoutItem size="4">
                                <aura:if isTrue = "{!v.show}">
                                    <c:customLookupComp objectAPIName="Master_Customer__c"
                                                        iconName="standard:account"
                                                        selectedRecord="{!v.selectedLookUpRecord}"
                                                        label="Search"
                                                        fieldAPIName="Id"
                                                        resultField1="Master_Customer__c"
                                                        resultField2=""
                                                        showlabel="false"
                                                        />
                                    <force:inputField  value="{!v.selectedLookUpRecords}"/>
                                </aura:if>

                            </lightning:layoutItem>
                        </td>
                        <td role="gridcell">
                            <div class="slds-truncate" title="Parent acc"><a href="{!'/'+ account.parentid }" target="_blank" tabindex="-1">{!account.Parent.Name}</a></div>
                        </td>
                        <td role="gridcell">
                            <label class="slds-checkbox--button__label" data-record="{!idx}"  onclick="{!c.masterCustomerCheckbox}">

                                <ui:inputCheckbox aura:id="button1" />

                            </label>



                        </td>
                    </tr>

                </aura:iteration>

Controller
 
onLookupSelected : function(component, event) {
    console.log('in lookupselected');
    var selectedAccountGetFromEvent = event.getParam("selectedRecord");
    console.log('in lookupselected2');
    var recordsList = component.get("v.selectedLookUpRecords");
    recordsList.push(selectedAccountGetFromEvent);
    //component.set("v.selectedLookUpRecords" , selectedAccountGetFromEvent); 
    console.log('in lookupselected3');
    var record = component.get("v.selectedLookUpRecords");


},
masterCustomerCheckbox : function(component, event, helper) {
    console.log('in myfunc');
    //var show = component.get("v.show");
    //console.log('before show' + show);
    //component.set("v.show", false);
    //console.log('show ' + show);
    var selectedItem = event.currentTarget; // Get the target object
    var index = selectedItem.dataset.record; // Get its value i.e. the index This is because in the iterration i used index on it
    var selectedacc = component.get("v.Accounts")[index]; // Use it retrieve the stored record
    console.log('Acc Id ' + selectedacc.Id);

    var masterCustomersToCreate = component.get("v.masterCustomerToCreate");
    masterCustomersToCreate.push(selectedacc);

    console.log('this is the master customer to create' + masterCustomersToCreate);

    var action = component.get('c.createMasterCustomers');

    action.setParams({
        'accList': masterCustomersToCreate
    })

    action.setCallback(this, function(response) {
        //store state of response
        var state = response.getState();
        if (state === "SUCCESS") {
            //alert('Record Created');
        }
    });
    $A.enqueueAction(action);



},