You need to sign in to do that
Don't have an account?
Jake Bullard
Controller
Controller changes boolean but won't change is a second time.
Hey guys,
Here is a fun one, I am working on disabling a button unless a checkbox disclaimer is checked. I wrote a little controller that should check the checkbox value and depending on whether it's true or false, update the disabled boolean to the inverse. It works on the first change when I check the box the diabled flag goes to false. However when I uncheck the box it doesn't update that boolean. What am I doing wrong? Thanks!
Examples screenshots
This is correct.
This is correct.
This is not, the button value should be true
Cmp code
<aura:component access="global" implements="lightning:availableForFlowScreens"> <aura:attribute name="proofSelection" type="String"/> <aura:attribute name="Changes" type="String"/> <aura:attribute name="Encoded_ID" type="String" /> <aura:attribute name="DisclaimerValue" type="Boolean" default="false"/> <aura:attribute name="ButtonDisabled" type="Boolean" default="true"/> <aura:attribute name="UploadFiles" type="Boolean" default="false"/> <aura:attribute name="radioOptions" type="List" default="[ {'label': 'Yes', 'value': 'true'}, {'label': 'No', 'value': 'false'} ]"/> <div style="width:400px;"> <div class="slds-p-around_medium slds-p-bottom_medium" > <div class="slds-form slds-form_stacked"> <lightning:select name="selectItem" label="How's the proof look?:" value="{!v.proofSelection}" class="slds-p-top_small" > <option value="-Select One-">-Select One-</option> <option value="I approve my proof. Please proceed to print!">I approve my proof. Please proceed to print!</option> <option value="I would like changes made to my proof.">I would like changes made to my proof.</option> </lightning:select> <!-- If proof is not approved, also ask customer for changes. --> <aura:if isTrue="{!v.proofSelection == 'I would like changes made to my proof.'}"> <div class="slds-form-element"> <lightning:textarea name="ChangesText" value="{!v.Changes}" label="Tell us what you'd like changed:" class="slds-p-top_small"/> <div class="slds-p-top_small"></div> <lightning:radioGroup aura:id="UploadFiles" name="UploadFiles" label="Would you like to upload new content? (logos, images, etc)" options="{! v.radioOptions }" value="{! v.UploadFiles }" /> <div class="slds-p-top_small"></div> </div> <!-- If customer clicks yes to upload files show the file upload iframe. --> <aura:if isTrue="{! v.UploadFiles }" > <iframe src="{!'/TVA_CFB__RequestFile?'+v.Encoded_ID}" height="325px" width="325px" frameborder="0" class="slds-p-bottom_small"/> </aura:if> </aura:if> <div class="slds-p-top_small"></div> <!-- If proof is approved, askes customer for check box. --> <aura:if isTrue="{!v.proofSelection == 'I approve my proof. Please proceed to print!'}"> <lightning:input aura:id="DisclaimerCheckBox" type="checkbox" label="I have proofread my artwork and am aware that Taradel is not responsible for any graphic, text, pricing, color variation or format issues after I submit the approval for print." name="DisclaimerCheckBox" value="DisclaimerCheckBox" onchange="{!c.handleCheck}" /> </aura:if> </div> <div class="slds-p-top_small"></div> <lightning:button label="Finish and Save" aura:id="Finish_and_Save" variant="neutral" onclick="{!c.handleChange}" disabled="{! v.ButtonDisabled}"/> <div class="slds-p-top_small"></div> <ui:outputText value="{!'Discalimer Value: ' + v.DisclaimerValue}" /> <div class="slds-p-top_small"></div> <ui:outputText value="{!'ButtonDisabled Value: ' + v.ButtonDisabled}" /> </div> </div> </aura:component>
Controller
({ handleChange : function(component, event, helper) { // When an option is selected, navigate to the next screen var response = event.getSource().getLocalId(); component.set("v.value", response); var navigate = component.get("v.navigateFlow"); navigate("NEXT"); }, handleCheck : function(component, event, helper) { var isChecked = component.find("DisclaimerCheckBox").get("v.checked"); component.set("v.DisclaimerValue", isChecked); var disabled; var boxvalue = component.find("DisclaimerCheckBox").get("v.checked"); if (boxvalue = true){ disabled = false; } else { boxvalue = true; } component.set("v.ButtonDisabled", disabled); } })
Please see the comment with my name in the below code.
All Answers
Please see the comment with my name in the below code.