function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Phuc Nguyen 18Phuc Nguyen 18 

aura:if not working on toggle

Hello all,
I am trying to show another div based on a checkbox toggle but its not working.  I tried using the aura:if but the div never renders.  I am able to use the aura:if is true in other places on the form but not for the checkbox toggle.   
<div class="modalCheckContainer">
                <span>
                    <label class="slds-checkbox--toggle slds-grid checkbox-left">
                        <span class="slds-form-element__label slds-m-bottom--none">file attached?</span>
                        <input id="attfile__c" type="checkbox" name="checkbox"
                            aria-describedby="fileattatoggle" value="{!v.fileatttoggle}" />
                        <span id="Toggle" class="slds-checkbox--faux_container" aria-live="assertive">
                            <span class="slds-checkbox--faux"></span>
                            <span class="slds-checkbox--on"></span>
                        </span>
                    </label>
                </span>
        </div>

Cheers,
P
Best Answer chosen by Phuc Nguyen 18
Abdul KhatriAbdul Khatri
Here is the code with both toggle and checkbox type

Component 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">

    <aura:attribute name="fileatttoggle" type="Boolean" default="" />

    <lightning:input 
                aura:id="chk" 
                type="toggle" 
                label="file attached? " 
                name="toggle"  
                checked="false" 
                messageToggleActive="" 
                messageToggleInactive="" 
                onchange="{!c.handleToggle}" 
    />


    <lightning:input 
                aura:id="chk2" 
                type="checkbox" 
                label="file attached?" 
                value="Option 4"
                checked="false"
                onchange="{!c.handleCheckbox}"
    /> 

    <aura:if isTrue="{!v.fileatttoggle}">
        div would render
    </aura:if>
</aura:component>

Controller 
({
    handleToggle : function(component, event, helper) {

        component.set("v.fileatttoggle", component.find("chk").get("v.checked"));
    },

    handleCheckbox : function(component, event, helper) {

        component.set("v.fileatttoggle", component.find("chk2").get("v.checked"));
    }
})

​​​​​​​
 

All Answers

Abdul KhatriAbdul Khatri
Do you have a complete code to see what exactly you are trying to achieve?
Phuc Nguyen 18Phuc Nguyen 18
Hey Abdul,
I am just trying show this div after the user selects the toggle check box to true.  
<div style="text-align:right;">
            <c:child parentId="{!v.id}"/>
</div>

So I was trying somethink like this 
<aura:if isTrue="{!v.fileatttoggle=='true'}">
div would render
</aura:if>
Uttpal_ChandraUttpal_Chandra
Hi Phuc,

Try this

Component:- 
<p aura:id="text" >

<lightning:input type="toggle" label="Basic option" name="input1" onchange="{!c.avenger}" />

</p>

<aura:if isTrue="{!v.boolean}">
                        <lightning:input label="Enter Amount" aura:id="amount"  />
 </aura:if>

Controller 
avenger: function(component,event,helper)
    {
        var toggleText = component.find("text");
        $A.util.toggleClass(toggleText, "toggle");
        
        component.set("v.boolean",!component.get("v.boolean"));
    }

 Css 
.THIS .toggle {
display: none;
}


Regards,
Uttpal Chandra
 
Phuc Nguyen 18Phuc Nguyen 18
Hello Uttpal,
Thank you for the reply.  Does it matter that my field type is 'checkbox'?   
<input id="attfile__c" type="checkbox" name="checkbox"

Regards,
P
Abdul KhatriAbdul Khatri
Here is the code with both toggle and checkbox type

Component 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">

    <aura:attribute name="fileatttoggle" type="Boolean" default="" />

    <lightning:input 
                aura:id="chk" 
                type="toggle" 
                label="file attached? " 
                name="toggle"  
                checked="false" 
                messageToggleActive="" 
                messageToggleInactive="" 
                onchange="{!c.handleToggle}" 
    />


    <lightning:input 
                aura:id="chk2" 
                type="checkbox" 
                label="file attached?" 
                value="Option 4"
                checked="false"
                onchange="{!c.handleCheckbox}"
    /> 

    <aura:if isTrue="{!v.fileatttoggle}">
        div would render
    </aura:if>
</aura:component>

Controller 
({
    handleToggle : function(component, event, helper) {

        component.set("v.fileatttoggle", component.find("chk").get("v.checked"));
    },

    handleCheckbox : function(component, event, helper) {

        component.set("v.fileatttoggle", component.find("chk2").get("v.checked"));
    }
})

​​​​​​​
 
This was selected as the best answer