enter image description here

I have one radio button and one input-field..I am trying to achieve something like.if i click on the radio button , the input field should get active and value of that input-field should come automatically..If the radio button is not selected ..the field should be available but it should be disabled.

| improve this question | | | | |

Try this out


<aura:component >
<aura:attribute name="options" type="List" default="[
                                                    {'label': 'Codes', 'value': '1'},
                                                    {'label': 'Mappings', 'value': '2'}
<aura:attribute name="radioValue" type="Integer" default=""/>
<aura:attribute name="textValue" type="String" default=""/>
                      label="Data to Export"
                      options="{! v.options }"
                      value="{! v.radioValue }"
                      onchange="{! c.handleChange }"
<ui:inputText aura:id="file" label="Export File Name" disabled="true" value="{!v.textValue}"/>


handleChange : function(component, event, helper) {
    var val = event.getSource().get("v.value");
    if(val) {
        var inputFile = component.find("file");
        inputFile.set("v.value","Value to be Set Dynamically");

Using radioGroup will be suitable for your case.And having separate attributes will be make it reusable wherever you need. Hope this helps.

| improve this answer | | | | |

I have tried your requirement in my developer org. Please add below mentioned code to any component and add test it.

.cmp file >

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
<aura:attribute name="myText" type="string" default=""/>

<ui:inputText aura:id='textField' label="Export File name" value="" disabled='true'/>    
<ui:inputRadio label='Date To Export' change='{!c.onRadio}' />

make sure to close aura:component at the end, as i am not able to include in the above mentioned code.

.controllerjs file > enter the below mentioned code in the client side js file

onRadio: function (cmp, event, helper) {
    cmp.find("textField").set("v.value","Automated Text appeared here!"); 

so whenever you click on the radio button input text has been update and the field is editable.

enter image description here

enter image description here

| improve this answer | | | | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.