2

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

4

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.

2
  • Thanks for your reply Caspar. In your attribute, it almost looks like you are making a push in an array, which makes sense, but wouldn't that be more of an amendment to an array than a binding? I wasn't able to get the binding to work, but I don't know if it is due to both of my lists being dynamic... the example I gave was for illustration only. And yes, using the HTML input works just fine with my code, but I felt that there was a better alternative to the HTML input.
    – Logan
    Jun 21 '17 at 14:03
  • You need to push to the array as in my example and then call component.set("v.getGifting",theResult); to get the bindings to run. Jun 21 '17 at 17:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.