render radio button in asp.net mvc using knockout - asp.net

Question

my model -
public class Model
{
public String SelectedValue;
}
action method -
public ActionResult Index()
{
Model model = new Model();
model.SelectedValue = "a";
return View("Index1", model);
}
view -
<input type="radio" name="Group1" value="a" data-bind="attr: { checked: SelectedValue }" />
<input type="radio" name="Group1" value="b" data-bind="attr: { checked: SelectedValue }" />
<input type="radio" name="Group1" value="c" data-bind="attr: { checked: SelectedValue }" />
<script type="text/javascript">
var data = #Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model));
BindData();
</script>
My javascript -
function BindData() {
viewModelData = ko.mapping.fromJS(data);
ko.applyBindings(viewModelData);
}
When my view is rendered, it renders all three radio buttons with the one with value = "c" selected. But from action method i am selecting radio button with value "a". why is it so?
Can anyone please help me understanding whether i have any issue with my code or how does knockout handle radio button selections internally. Thanks!

Answer 1

Use the checked binding instead of the attr binding which is directly created for this scenario:
The checked binding links a checkable form control — i.e., a checkbox (<input type='checkbox'>) or a radio button (<input type='radio'>) — with a property on your view model.
So in your case you need to write:
<input type="radio" name="Group1" value="a" data-bind="checked: SelectedValue" />
<input type="radio" name="Group1" value="b" data-bind="checked: SelectedValue" />
<input type="radio" name="Group1" value="c" data-bind="checked: SelectedValue" />
Demo JSFiddle.