[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 enter image description here

  • And how are you passing the unique id to button elements? Jul 4, 2017 at 12:09

1 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"/>

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);
  • cannot use lightning:button because they look differently (with borders etc) Jul 4, 2017 at 10:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .