function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Jake BullardJake Bullard 

Checkbox lightning:input doesn't update Boolean attribute

Hey guys,

I'm new to Lightning components and everything is working perfectly except the checkbox. For some reason the checkbox below doesn't update the attribute to "True" when it's checked. Seeing as the Radio Group and Select fields work just fine I'm not really sure what I'm doing wrong and would love your help. Thanks!
 
<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="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>
       		</aura:if>
            
            <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>
          
        	<!-- If proof is  approved, askes customer for check box. -->
			<aura:if isTrue="{!v.proofSelection == 'I approve my proof. Please proceed to print!'}">
                
            <lightning:input type="checkbox" name="ProofDisclaimer" 
             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." value="{!v.DisclaimerValue}" aura:id="ProofDisclaimer" class="slds-p-vertical_small" Checked="true" />
    		</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}" />
        

    </div>
    </div>    
</aura:component>

 
sfdcMonkey.comsfdcMonkey.com
<lightning:input type="checkbox" name="ProofDisclaimer" 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."  aura:id="ProofDisclaimer" class="slds-p-vertical_small" Checked="{!v.DisclaimerValue}" />
you don't have need to use value attribute with checkbox type input, bind your aura attribute with checked attribute Checked="{!v.DisclaimerValue}"  , and it will be work ;) 

Thanks
if this answer helps you then kindly close your query with choosing best answer so it make proper solution for others in future
sfdcmonkey.com

 
Jake BullardJake Bullard

Unforuntly still no dice piyush_soni, my updated code is below. The value still doesn't bind for some strange reason. I added an output just to make it easier to test. 

 

<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="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>
       		</aura:if>
            
            <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>
          
        	<!-- If proof is  approved, askes customer for check box. -->
			<aura:if isTrue="{!v.proofSelection == 'I approve my proof. Please 
                         proceed to print!'}">
   			<lightning:input type="checkbox" name="ProofDisclaimer" 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."  aura:id="ProofDisclaimer"
                     class="slds-p-vertical_small" Checked="{!v.DisclaimerValue}" />
    		<ui:outputText value="{!'Checkbox boolean: '+v.DisclaimerValue}"/>
            </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}" />

        

    </div>
    </div>    
</aura:component>
 

User-added image

 

Jake BullardJake Bullard

Update! So I finally found a way to make this work. I added a event to my controller to read the value of the checkbox and update the attribute. Not sure why I had to do this but it works. Would love to hear thoughts on why that is and whether or not I did the right thing. Either way I;m stoked to move on with this project. 

 

My New Code, cleaned up a few things as well: 

<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="test" type="Boolean" default="false"/>
    <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>            
       		</aura:if>
            
        	<!-- 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>
          
        	<!-- 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}" />

        

    </div>
    </div>    
</aura:component>


My 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);
    }
 })
Chaminda Silva 6Chaminda Silva 6
@Jake Bullard use checked instant of Checked then it should work.
<lightning:input type="checkbox" label="Sone Label" checked="{!v.DisclaimerValue}"/>
Farah Naqvi 5Farah Naqvi 5

@Chaminda Silva 6 this resolved the issue for me. 

Devendra verma 14Devendra verma 14

Hi,

can Someone assist me with below - CheckBox field is always coming false..even when from UI checkBox is ticked.

CheckBox field on task:- 
Repeat_Call_Notification__c

.cmp

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



 <div class="slds-size--1-of-1 slds-p-horizontal_x-small slds-p-vertical_large" >
        <lightning:input aura:id="callNotificationCheckBox" type="checkbox" 
                         label="Repeat Call Notification" 
                         name="callNotificationCheckBox"
                         checked = "{!v.checkBoxField}" 
                         onchange = "{!c.handleCheck}"/>
    </div>

 


Controller.JS

 


  handleCheck : function(component, event, helper) {
        alert("insdide handleCheck");
     //    var newCheckBoxValue =event.getSource(). get('v.checked');
var newCheckBoxValue = component.find("callNotificationCheckBox")..get("v.checked");
    component.set('v.checkBoxField.Repeat_Call_Notification__c',newCheckBoxValue);
    console.log(newCheckBoxValue);
}