[SalesForce] enable button when checkbox checked in lightning component

When i click on checkbox I am calling controller function and in that I am setting value true, but it is not enabled.

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>

Controller.js

({
    Showhide : function(component, event, helper) {
        component.set("v.disabled",false);
    }
})

Best Answer

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.

No changes in your component, 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 unchanged:

<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>
Related Topic