Salesforce Lightning make checkbox checked using jQuery

Question

I am wanting to iterate over two arrays, and I want to set checkboxes to checked whenever items in the array match. I have no problem with the iteration, and I can change the checkbox with the name to checked, but it doesn't show as checked on the front end. my code is this:

CMP

<aura:component controller="MyProfileApex" 
            implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes">    

<ltng:require styles="<<styles>>" 
              scripts="<<scripts>>"
              afterScriptsLoaded="{!c.doInit}" />


<aura:attribute name="getGifting" type="sobject[]"/>
<aura:handler name="change" value="{!v.getGifting}" action="{!c.handleRoleChange}"/>

     <aura:iteration items="{!v.getGifting}" var="gift">
          <ui:inputCheckbox class="thisClass" name="{!gift.Display_Name__c}" click="{!c.RunGiftList}" value="checked"/>
          <ui:outputText class="thisClass" value="{!gift.Display_Name__c}"/>
     </aura:iteration>

</aura:component>

JS

handleRoleChange: function(component, event, helper) {
    var curRoles = ["1", "2", "3", "4", "5"];
    var theResult = component.get("v.getGifting");
    for (var i = 0; i < theResult.length; i++) {
        for (var j = 0; j < curRoles.length; j++) {
            if (theResult[i].Display_Name__c == curRoles[j]) {
                console.log('--' + curRoles[j] + '--');
                $('input[name=' + curRoles[j] + ']').attr('checked', true);
            }
        }
    }
}

Everything seems to be firing correctly. Console log shows the value I expect, and when I inspect element on the checkbox, it shows as Checked, but the checkbox is not checked... Can anyone tell me what I am doing wrong, or what I have not included in my code?

Thanks, Logan

Answer 1

ui:inputCheckbox is not a standard html element. You can't use jQuery to change any of it's attributes like that.

What you can do is bind it's value attribute to your getGifting array and set that to true or false as required.

Something like this:

if (theResult[i].Display_Name__c === curRoles[j]) {
    theResult[i].value = true;
}
else {
    theResult[i].value = false;
}

And bind to this value:

<ui:inputCheckbox class="thisClass" name="{!gift.Display_Name__c}" click="{!c.RunGiftList}" value="{!gift.value}"/>

Your attribute:

<aura:attribute name="getGifting" type="sobject[]" default="[{'Display_Name__c':'1','value':true},{'Display_Name__c':'2','value':true}]"/>

Your other alternative is to use a standard html input - you will then be able to set that - although there is no real need to use jQuery if you are only using it for this.