[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? – itzmukeshy7 Jul 4 '17 at 12:09

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);
| improve this answer | |
  • cannot use lightning:button because they look differently (with borders etc) – Vladyslav K Jul 4 '17 at 10:34

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.