How to get all buttons in my page from a controller javascript function(component, event, helper)?

Question

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 ?
}

Answer 1

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]);
    }
}

Answer 2

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);
    }
}