one radio is not SELECTED? - asp.net-mvc

Question

I changed the approch, now, I get selected radio value correctly.
Issue: One of my radio is selected when initialize (first load then user can change the selection), but radio is not selected first time, how to initialize "Selected" appropriately?
#model Demo.Web.ViewModels.HomeViewModel
#{
ViewBag.Title = "Two Page";
}
#using (Html.BeginForm("Index", "Two", FormMethod.Post, new Dictionary<string, object> { { "data-bind", "submit:onSubmit" } }))
{
<table>
<tr>
<td>
<div data-bind="foreach: items">
<input type="radio" name="items" data-bind="attr: { value: id }, checked: $root.selected" />
<span data-bind="text: name"></span>
</div>
<div data-bind="text: selected">
</div>
</td>
</tr>
</table>
<input type="submit" name="send" value="Send" />
}
<script type="text/javascript">
var viewModel = {
items: [
{ "id": 1, "name": "one", "selected": false },
{ "id": 2, "name": "two", "selected": true },
{ "id": 3, "name": "three", "selected": false }
],
selected: ko.observable(),
onSubmit: function(){
var x = this.selected();
}
};
$(function() {
ko.applyBindings(viewModel);
});

Answer 1

When bound against inputs of type radio, the checked binding in Knockout tries to write the input's value to whatever value is bound against. The idea is that you all of the radios are bound against the same observable.
Something like:
var viewModel = {
items: [
{ id: 1, name: "one" },
{ id: 2, name: "two" },
{ id: 3, name: "three" }
],
selected: ko.observable()
};
Bound against a UI like:
<div data-bind="foreach: items">
<input type="radio" name="items" data-bind="attr: { value: id }, checked: $root.selected" />
<span data-bind="text: name"></span>
</div>
<div data-bind="text: selected"></div>
Sample: http://jsfiddle.net/rniemeyer/BbX4S/
So, in your case, you should be able to bind your radios against $root.IsSelected and use it rather than looping through the items.
When you initialize it, you might want to look to see if any button is checked, and then populate the root level IsSelected appropriately.