0

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 | | | | |
0

Try this out

Component:

<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=""/>
<lightning:radioGroup
                      aura:id="radioGrp"
                      name="radioButtonGroup"
                      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}"/>

Controller:

handleChange : function(component, event, helper) {
    var val = event.getSource().get("v.value");
    console.log('val',val);
    if(val) {
        var inputFile = component.find("file");
        inputFile.set("v.disabled",false);
        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 | | | | |
0

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!"); 
    cmp.find("textField").set("v.disabled",'false');
},})

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.