function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sid LightningSid Lightning 

Enable and disable lightning input field based on checkbox?

Hi,

I have a special discount , However thing is if that discount field gets applied all other fields should get disabled.

I am thinking to apply a checkbox "special discount". Once that gets filled in. all other fields gets disabled and only special discount text field gets enabled.

All fields are lightning input

How can i do it in lightning ?
Best Answer chosen by Sid Lightning
Prathyu bPrathyu b
HI Sid,
Can you try below below to hide lightning:input fileds. 
Lightning Component Code:

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
  <aura:attribute name="acc" type="Account" default="{ 'sobjectType': 'Account' }"/>
    <aura:attribute name="hide" type="string" default="true"/> 
    <form>
        <lightning:input name="Name" label="Name" aura:id="accountName" value="{!v.acc.Name}" onchange="{!c.disableFields}"/> 
        <aura:if isTrue="{!v.hide}"> 
            <lightning:input name="First Name" label="First Name" value="{!v.acc.firstName}"/>
            <Lightning:input name="Last Name" label="Last Name" value="{!v.acc.lastName}"/>
       </aura:if>   
    </form>
</aura:component>
  
js.cotroller Code

({
	disableFields : function(component, event, helper) {
        var val = component.find("accountName").get("v.value");
        if(val != null){
             component.set('v.hide' , "false");
        }
	}
})
Let me know if it didnt work for you.

All Answers

Prathyu bPrathyu b
HI Sid,
Can you try below below to hide lightning:input fileds. 
Lightning Component Code:

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
  <aura:attribute name="acc" type="Account" default="{ 'sobjectType': 'Account' }"/>
    <aura:attribute name="hide" type="string" default="true"/> 
    <form>
        <lightning:input name="Name" label="Name" aura:id="accountName" value="{!v.acc.Name}" onchange="{!c.disableFields}"/> 
        <aura:if isTrue="{!v.hide}"> 
            <lightning:input name="First Name" label="First Name" value="{!v.acc.firstName}"/>
            <Lightning:input name="Last Name" label="Last Name" value="{!v.acc.lastName}"/>
       </aura:if>   
    </form>
</aura:component>
  
js.cotroller Code

({
	disableFields : function(component, event, helper) {
        var val = component.find("accountName").get("v.value");
        if(val != null){
             component.set('v.hide' , "false");
        }
	}
})
Let me know if it didnt work for you.
This was selected as the best answer
Ajay K DubediAjay K Dubedi
Hi Sid,

Try the following code it works for you: 
COMPONENT:
<aura:component access="global"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction">

    <aura:attribute name="loaded" type="Boolean" default="true" />
    <aura:attribute name="customAddress" type="Boolean" default="true" required="false" />

    <div>
        <aura:if isTrue="{! v.loaded }">
            <div class="slds-size_1-of-2 slds-align_absolute-center">
                <ui:inputCheckbox aura:id="checkbox" label="special discount" change="{!c.onCheck}" value="false"/>
            </div>
    <div class="slds-size_1-of-2 slds-align_absolute-center">
        Name:<lightning:input name="text" />
    </div>
    <div class="slds-size_1-of-2 slds-align_absolute-center">
        Email:<lightning:input name="text" />
    </div>
    <div class="slds-size_1-of-2 slds-align_absolute-center">
        Address:<lightning:input name="text" />
    </div>

        <aura:set attribute="else">
            <div class="slds-size_1-of-2 slds-align_absolute-center">
                <ui:inputCheckbox aura:id="checkbox" label="special discount" change="{!c.onUnCheck}" value="true"/>
            </div>
            <div class="slds-size_1-of-2 slds-align_absolute-center">
                Name:<lightning:input name="text" disabled="{!v.customAddress }"/>
            </div>
            <div class="slds-size_1-of-2 slds-align_absolute-center">
                Email:<lightning:input name="text" disabled="{!v.customAddress }" />
            </div>
            <div class="slds-size_1-of-2 slds-align_absolute-center">
                Address:<lightning:input name="text" disabled="{!v.customAddress }"/>
            </div>
        </aura:set>
        </aura:if>
    </div>
</aura:component>

controller:
({
    onCheck : function(component, event, helper) {
     component.set("v.loaded" , false);

       component.set("v.disabled", false);
    },
    onUnCheck :function(component, event, helper) {
                    var val=component.set("v.loaded" , true);

                   }
})
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks,
Ajay Dubedi

 
Deepali KulshresthaDeepali Kulshrestha
Hi Sid,

To get the checkbox value in Showhide function, you need to use event.getSource().get('v.value').

And with component.find("disableenable") you can get the button for disabling or you can have an additional attribute store the state and use it. I like the component.find way.

Here is the controller method in action:

({
    Showhide : function(component, event, helper) {
        let checkBoxState = event.getSource().get('v.value');
        console.log(event.getSource().get('v.value'));
        component.find("disableenable").set("v.disabled", !checkBoxState);
    }
})

Component :

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <ui:inputCheckbox aura:id="checkbox" change="{!c.Showhide}" />
    <p>I have read and agree to the Terms </p>
    <lightning:button variant="brand" label="Continue" aura:id="disableenable" disabled="true"/>
</aura:component>

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

 Thanks and Regards,
 Deepali Kulshrestha
Sid LightningSid Lightning
Hi,

Can you please help me in my other questions