Component.find not working for lightning:input

Question

I need to enable the text boxes based on the value selected in combobox -

Below Picture -

Based on the Combobox changed I am trying to enable the corresponding input boxes, which is not working with component.find

Below Code --

            <aura:iteration items="{!v.contributionList}" 
            var="contriWrap">
                <tr>
                    <td><div class="slds-text-title slds- 
                      text-color_default slds-truncate"> 
                           {!contriWrap.classification}</div></td>
                    <td>
                        <!-- <lightning:select value="{!contriWrap.contributionType}" >   
                                         <option value="Fixed Dollars">Fixed Dollars</option>
                                         <option value="Percent">Percent</option>
                                        </lightning:select>-->
                        <lightning:combobox id="{!contriWrap.contribution}"
                                            value="{!contriWrap.contributionType}"
                                            onchange="{!c.handleChange}"
                                            options="{!v.contributionType}"
                                            placeholder="Not Applicable"
                                            variant="label-hidden"
                                            />
                    </td>

                    <td>
                        <lightning:input aura:id="{!contriWrap.contribution}" label="For Employee" type="currency" variant="label-hidden" placeholder="0" value="{!contriWrap.contributionEmployee}" disabled="true"/><!--<span class="slds-form-element__addon" id="fixed-text-addon-post">USD</span>-->
                    </td>
                    <td>
                        <lightning:input aura:id="{!contriWrap.contribution}" label="For Dependent" type="currency" variant="label-hidden" placeholder="0" value="{!contriWrap.contributionDependent}" disabled="true"/><!--<span class="slds-form-element__addon" id="fixed-text-addon-post">%</span>-->
                    </td>

                </tr>
            </aura:iteration>



handleChange: function (component, event) {
    // Get the string of the "value" attribute on the selected option
    var selectedOptionValue = event.getParam("value");
    var selectedId = event.getSource().get("v.id");
    console.log('Hi selectedOptionValue',selectedOptionValue);
    console.log('selectedId-->'+selectedId);
    var cmpTarget = component.find(selectedId);
    console.log(' cmpTarget'+cmpTarget);
    component.find(selectedId).set("v.disabled",false);
    console.log('after setting value');
    //component.set("v.seletedContributionType",selectedOptionValue);
},

Answer 1

aura:id cannot be dynamically created using {!} binding. It has to be static.

aura:id doesn't support expressions. You can only assign literal string values to aura:id.

So you can put everything between tr in separate child component and implement logic:

<aura:component >
    <aura:attribute name="contriWrap" type="Map" />
    <td>
        <div class="slds-text-title slds- 
                    text-color_default slds-truncate"> {!v.contriWrap.classification}</div>
    </td>
    <td>
        <!-- <lightning:select value="{!v.contriWrap.contributionType}" >   
                                          <option value="Fixed Dollars">Fixed Dollars</option>
                                          <option value="Percent">Percent</option>
                                         </lightning:select>-->
        <lightning:combobox id="{!v.contriWrap.contribution}"
                            value="{!v.contriWrap.contributionType}"
                            onchange="{!c.handleChange}"
                            options="{!v.contributionType}"
                            placeholder="Not Applicable"
                            variant="label-hidden" />
    </td>
    <td>
        <lightning:input aura:id="findable_id1" label="For Employee" type="currency"
                         variant="label-hidden" placeholder="0"
                         value="{!v.contriWrap.contributionEmployee}" disabled="true" />
        <!--<span class="slds-form-element__addon" id="fixed-text-addon-post">USD</span>-->
    </td>
    <td>
        <lightning:input aura:id="findable_id2" label="For Dependent" type="currency"
                         variant="label-hidden" placeholder="0"
                         value="{!v.contriWrap.contributionDependent}" disabled="true" />
        <!--<span class="slds-form-element__addon" id="fixed-text-addon-post">%</span>-->
    </td>
</aura:component>

and in parent:

<aura:iteration items="{!v.contributionList}"
                var="contriWrap">
    <tr>
        <c:childTdComp contriWrap={!contriWrap} />
    </tr>
</aura:iteration>

Also implement handleChange in child component.