2

I know how to enable the clicked button.
Lets say I want to enable all buttons on the click of a button.

The button is in a Lightning component as:

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >

<aura:attribute name="msg" type="String"/>

<p>What happened: [<ui:outputText value="{!v.msg}"/>]</p>

<div>
    <ui:button label="A"
        press="{!c.disableMe}"/>

    <ui:button label="B"
        press="{!c.disableMe}"/>

    <ui:button label="Enable them all!!!"
        press="{!c.myClearButtonClicked}"/>
</div>

In my js controller:

myClearButtonClicked: function(component, event, helper) {

    var btnClicked = event.getSource();         // the button I clicked
    btnClicked.set("v.disabled",false);         // Enable the button
    component.set("v.msg", 'All buttons have been enabled'); // update message

    // I want to enable all buttons in the page instead of the one I clicked
    // How do I get a grip on those buttons from here ?
}

2 Answers 2

4

Add an aura:id to the <ui:button /> component, then find the button by it.

component:

<ui:button aura:id="btn" label="A"
        press="{!c.disableMe}"/>

    <ui:button aura:id="btn" label="B"
        press="{!c.disableMe}"/>

    <ui:button aura:id="btn" label="Enable them all!!!"
        press="{!c.myClearButtonClicked}"/>

controller method:

var buttons = component.find("btn"); // return array if components with same 'aura:id' exist
if (buttons) {
    for (var i=0; i < buttons.length; i++) {
        console.log(buttons[i]);
    }
}
0
1

you can get all the ui:button's in the component, since they exist in the 'v.body' of the components super (every component has a super, if none defined it's merely aura:component):

var buttons = component.getSuper().find({ instancesOf : "ui:button" });
if (buttons) {
    for (var i=0; i < buttons.length; i++) {
        buttons[i].set("v.disabled", false);
    }
}
4
  • It's not working!!! Dec 7, 2016 at 18:53
  • the find(...) command returns nothing => buttons.length == 0 Dec 7, 2016 at 18:55
  • sorry, instancesOf only works if the v.body was used to set the elements / components inside of itself. Doing the aura:id way is better Dec 7, 2016 at 21:06
  • found out that there's a fundamental understanding I was missing with v.body, it's actually on the super. Edited my reply to show how it could work Jan 26, 2017 at 19:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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