javascript - KnockoutJS checked binding issue -

i relatively new knockoutjs, seem having problem observablearray of checkboxes, checkboxes have observable properties checked, , disabled.

using knockout can check , uncheck box, seems once interact checkbox manually (ie clicking mouse) underlying data seems changing can't use knockout check or uncheck box anymore.

html

<div id="filterbyprice" data-bind="foreach: pricefilters">     <div>         <input type="checkbox" data-bind="attr: {id: $index, value: value, checked: checked, disable: disabled}" />         <span data-bind="text: label"></span>     </div> </div> 

javascript

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); }); 

http://jsfiddle.net/paulwilliams0/eyez2/

is there doing wrong? not new knockout, new mvvm in general. lot

here have working version of example:

http://jsfiddle.net/infantrash/hvac2/2/

1. data-bind attribute checkbox: use build-in binding handlers, attr: { id: $index } ok, value, checked , disable should not in curly brackets.

2. use knockout functions functionality instead of mixing jquery it.

   function viewmodel(){ var self = this; self.pricefilters = ko.observablearray([     new filterby("price0", "0", "all prices"),     new filterby("price1", "1", "1st price") ]);   self.checkallprices = function(){     ko.utils.arrayforeach(self.pricefilters(), function(item){         item.checked(true);     }) }; self.uncheckallprices = function(){     ko.utils.arrayforeach(self.pricefilters(), function(item){         item.checked(false);     }) }; 

   }

i changed viewmodel function instead of using object literal notation, that's preferred way, can use object literal notation if want.