+ Start a Discussion
Jake BullardJake Bullard 

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. 

User-added image
This is correct. 
User-added image
This is not, the button value should be true
User-added image

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);
    }
 })

 
Best Answer chosen by Jake Bullard
Naveen IlaNaveen Ila
Hi Jake, 

Please see the comment with my name in the below code. 

 
({
   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){ // Naveen Ila : This should be "==", however you given = 
             	disabled = false;
        	} else {
            	boxvalue = true;
        	}
        	component.set("v.ButtonDisabled", disabled);
    }
 })

 

All Answers

Naveen IlaNaveen Ila
Hi Jake, 

Please see the comment with my name in the below code. 

 
({
   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){ // Naveen Ila : This should be "==", however you given = 
             	disabled = false;
        	} else {
            	boxvalue = true;
        	}
        	component.set("v.ButtonDisabled", disabled);
    }
 })

 
This was selected as the best answer
Jake BullardJake Bullard
That did the trick thanks!