Mohit points out that right now you aren't binding the value of the ui:checkbox
to a component attribute, but that's not of concern here.
Using your code copied and pasted into a new component, I cannot reproduce your error. The checkbox state changes and it reports to console. Is there other code in the mix here? Is that your code verbatim?
That being said, both the dev guide and your code follow a bit of an anti-pattern in the event handler. Instead of setting a findable aura:id
and hard referencing that in your controller, your code is much more useful (and would handle a list view) if you use the event source instead. Example:
handleChanged : function(cmp,evt,helper){
var checkbox = evt.getSource();
console.log(checkbox.get("v.value"));
}
This will fine the component that fired the event.
When you add the negation to the value
property it turns the expression to a FunctionCallValue
. Since it is no longer directly mapped to an attribute (as it is with the single !
), clicking the checkbox no longer updates the original attribute. Imagine if instead of a simple negation there was a more complicated expression like value="{!v.myAttr.foo == 'meep'}"
. The framework doesn't know what to set back to this expression when the checkbox is clicked, so it ignores it.
In fact, if you go to Setup --> Lightning Components and check the "Enable Debug Mode" checkbox, you'll see a similar error in the console:
aura_dev.js:3977 AttributeSet.set(): unable to override the value for 'value=function (cmp, fn) { return !(cmp.get("v.myAttr.foo")); }'. FunctionCallValues declared in markup are constant.
There's probably a better way to handle this, but one workaround is to create a new attribute that is bound to the ui:inputCheckbox
value and then in the change handler update v.member.PreferencesDisableAllFeedsEmail
. Here's a simplified example:
Markup:
<aura:attribute name="checkboxValue" type="Boolean" default="false"/>
<ui:inputCheckbox value='{!v.checkboxValue}' change='{!c.changed}'/>
Controller:
changed: function(cmp) {
var val = cmp.get("v.checkboxValue");
cmp.set("v.member.PreferencesDisableAllFeedsEmail", !val);
}
In your case you'd probably want to set the initial value of checkboxValue
to the negation of member.PreferencesDisableAllFeedsEmail
in the init handler (or similar).
Best Answer
I found the answer! I wrote a class in css called
.myCheckbox
:and added the class to the
inputCheckbox
: