title: Checkbox binding of checked state inverted in Chrome
body: <p>I'm using Ember v2.5.1 and Ember data v2.6.2 and I have a series of nested components to render a hierarchical tree of categories. There is a closure action in the lowest level component <code>categories-tree-node</code>, which calls the <code>toggleAddCategory</code> function in the actions of the <code>categories-select</code> component and passes up the relevant category object. </p>
  
  <p>It works as expected in Safari, but for some reason the checked state is passed through inverted in Chrome and FF. The strange thing is that the checked state binding of the value itself renders correctly elsewhere in the template when the checkboxes are changed.</p>
  
  <p>I have created a <a href="https://ember-twiddle.com/1084e7750f45b034b917ecc9cd3c5cea?openFiles=templates.components.categories-select.hbs%2Ctemplates.components.categories-select.hbs" rel="nofollow noreferrer">demo here</a>, if you try checking/unchecking the boxes in Chrome/FF vs Safari you should see the issue. Is there a prefered way of handling this type of action binding with checkbox checked states? I have read that using Observers is considered an anti-pattern in Ember 2 and above, also when I tried this it did not work for the child categories.</p>