jquery - How to set the checkbox values when in an observableArray -

i have observablearray of items mapped list of checkboxes. start off being unclicked. when particular item selected want set of checkboxes become checked.

my viewmodel:

       function modelview(data) {             var self = this;              self.items= ko.observablearray(data.items);             self.itemoptions = ko.observablearray(data.itemoptions );               self.preselectoptions = function(item){                 ko.utils.arrayforeach(self.itemoptions(), function (itemoption) {                 var selected = false;                 //loop through options item has , preselect checkboxes                 (var = 0; < item.option.length; i++) {                     if (itemoption.id == item.option[x]) {                         selected = true;                         break;                     }                 }                  itemoption.chosen = selected;//check checkbox             });           } 

html snippet:

       <ul data-bind="foreach: channels">           <li>               <input type="checkbox" data-bind='checked: chosen' /><span data-bind="text: channelname"></span></li>        </ul> 

i have stepped through code , itemoption.chosen being set true. have rebind checkboxes?

the issue chosen not observable. binding won't update automatically when bound non-observable.

you make observable code run after setting self.itemoptions:

ko.utils.arrayforeach(self.itemoptions(), function (itemoption) {     itemoption.chosen = ko.observable(itemoption.chosen); }); 

however, since self.itemoptions shallow copy of data.itemoptions, data object's item options modified use observable. better option might use ko.mapping plugin:

self.itemoptions = ko.mapping.fromjs(data.itemoptions); 

in either case, you'll need change syntax reference chosen observable:

itemoption.chosen(selected); // check checkbox