How to make conditional disabled attribute on button in Lightning?

Question

[SOLVED] I want button to be disabled based on condition.

This does not compile:

<button aura:id="toggleButton" {!if(..., 'disabled', '')}>

This is always disabled

<button aura:id="toggleButton" disabled="{!if(..., 'true', 'false')}">

This throws runtime error:

component.find("toggleButton").set("v.disabled", true);

Access Check Failed! AttributeSet.get(): attribute 'disabled' of component 'markup://aura:html {54:1252;a} {toggleButton}' is not visible to 'markup://c:TreeNode {50:1252;a}'.

Remark: I want to have tree chevron icon disabled, so I want to utilise SLDS css rules. https://www.lightningdesignsystem.com/components/trees/?variant=base#react-target

Answer 1

standard html button is disabled when disabled exists with any value. You can render two types of buttons based on condition

<aura:if isTrue="{!v.isDisabled}">
    <button aura:id="toggleButton" disabled/>
    <aura:set attribute="else">
        <button aura:id="toggleButton"/>
    </aura:set>
</aura:if>

another option is to replace standard html <button/> with <ui:button> or <lightning:button>, then the following works:

component.find("toggleButton").set("v.disabled", true);