Binding checkboxes to array with Knockout.js (MVC Razor)

Question

I have a Knockout.js view model that looks like this:

"UserName":null,
"FirstName":null,
"LastName":null,
"Countries":{
    "arrCountries":[]
}

And a set of country checkboxes that all must be rendered with the same data-bind value (I'm using this custom CheckBoxListFor helper, which can apply custom HTML to each checkbox, but it's the same custom HTML for each checkbox. It takes a property that lists every available country from my razor view model to create the checkboxes, and then renders some as marked based on another razor view model property).

The checkbox values are integers (1, 2, 3, etc) and it's those integers that I'd like to throw into the arrCountries property of the view model.

Here's how a checkbox is rendered as it stands at the moment:

<input checked="checked" data_bind="checked: ???" id="Countries.arrCountries107" name="Countries.arrCountries" type="checkbox" value="1"></input>

I've proven the concept of using viewModel.Countries.arrCountries.push(1); to update the view model (followed by an alert that gives me a count of the elements in arrCountries to prove that the push worked), but I can't seem to get the data-bind HTML property on the checkboxes to wire up so that they check and uncheck as I send push and remove commands.

Any help much appreciated!

Paolo del Mundo · Accepted Answer · 2012-05-12 03:56:25Z

8

Make the checked data attribute point to the selected countries. If the checkbox's value is in the array of checkboxes, then it will be checked. It won't otherwise.

<input checked="checked" data-bind="checked: Countries" type="checkbox" value="3"></input>

Take a look at this fiddle I put up.

http://jsfiddle.net/u8xP9/3/

answered May 12, 2012 at 3:56

Paolo del Mundo

2,12113 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1390429 Over a year ago

Thanks Paolo! Your code made me realise that my data-binds on the checkboxes weren't being rendered properly (data_bind in razor code is normally translated to data-bind when rendered, but on the custom CheckBoxListFor control, that wasn't happening). An upgrade to v.1.4.2.3 of the control (from v.1.3b) sorted that out. With that fixed, your code got it all working brilliantly! Thanks!

Collectives™ on Stack Overflow

Binding checkboxes to array with Knockout.js (MVC Razor)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related