I need to enable the text boxes based on the value selected in combobox –
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);
},
Best Answer
aura:id
cannot be dynamically created using{!}
binding. It has to be static.So you can put everything between
tr
in separate child component and implement logic:and in parent:
Also implement
handleChange
in child component.