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

Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
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
    Commented Jun 21, 2017 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.
    – Caspar Harmer
    Commented Jun 21, 2017 at 17:39

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .