title: KnockoutJS checked binding issue
body: <p>I am relatively new to knockoutjs, but I seem to be having a problem with an observableArray of checkboxes, the checkboxes have some observable properties for checked, and disabled.</p>
  
  <p>Using knockout I can check and uncheck the box, but it seems that once I interact with the checkbox manually (IE by clicking it with the mouse) the underlying data seems to be changing but I can't use knockout to check or uncheck the box anymore.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="filterByPrice" data-bind="foreach: priceFilters"&gt;
      &lt;div&gt;
          &lt;input type="checkbox" data-bind="attr: {id: $index, value: value, checked: checked, disable: disabled}" /&gt;
          &lt;span data-bind="text: label"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>function FilterBy(name, value, label) {
      this.name = name;
      this.value = value;
      this.label = label;
      this.disabled = ko.observable(false);
      this.checked = ko.observable(false);
  }
  
  $(function () {
      var viewModel = {
          priceFilters: ko.observableArray([
          new FilterBy("price0", "0", "All Prices")])
      };
  
      ko.applyBindings(viewModel);
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/paulwilliams0/EYEz2/" rel="nofollow">http://jsfiddle.net/paulwilliams0/EYEz2/</a></p>
  
  <p>Is there something that I am doing that is wrong? Not only am I new to knockout, but I am new to MVVM in general. Thanks a lot</p>