Observable Array not binding properly to checkbox

Question

Checkboxes are not updating when I foreach loop and bind a boolean to a checkbox.

    function ViewModel() {
        var self = this;

        self.test = ko.observableArray([ false, false, false ]);

        return self;
    }

ko.applyBindings(new ViewModel());


<div data-bind="text: ko.toJSON(test)"></div>

<div data-bind="foreach: $root.test">
    <input type="checkbox" data-bind="checked: $data" />
</div>

You can view the issue on jsfiddle: http://jsfiddle.net/KVWet/1/

What browser are you using? If you use Chrome, go to Tools->Developer Tools and check the console. It will show you errors. Or if you use Firefox, download Firebug. — Martin
I do not see any errors in the jsfiddle I posted Edit: I linked the wrong jsfiddle, see the latest jsfiddle.net/KVWet/1 which illustrates the issue — jasonmit

mac10688 mac10688 · Accepted Answer · 2013-01-27T04:17:13

http://knockoutjs.com/documentation/checked-binding.html

Special consideration is given if your parameter resolves to an array. In this case, KO will set the element to be checked if the value matches an item in the array, and unchecked if it is not contained in the array.

Because if an item is checked its value is added to an array. If it isn't checked it takes it away. I think for this to work you will need keys added to the array so it can match with the checkbox it belongs to. An array of booleans won't help ko map it to its respective checkbox.

Observable Array not binding properly to checkbox

1 Answers