MVC Radiobutton default value did not set after knockout data-bind - asp.net-mvc

Question

I am using MVC strongly typed view to generate two radio buttons
<div>
#Html.LabelFor(model => model.Eligible)
#Html.RadioButtonFor(model => model.Eligible,"true", new { id="yes", data_bind = "checked: completeVM.Eligible " })
#Html.Label("yes", "YES")
#Html.RadioButtonFor(model => model.Eligible, "false", new {id="no", data_bind = "checked: completeVM.Eligible " })
#Html.Label("no", "No")
</div>
If I don't use data_bind, when the page loads, the 'No' radio button will be set by default. But after I add data_bind, neither radio button is checked. I noticed in my view model, the Eligible was displayed as :"Eligible": false; if I check 'No' button, it will display as "Eligible":"false". How can I fix this so that when the page loads, the 'No' button will be checked by default. Thanks

Answer 1

This is a common problem. Radio button values are always a string. Yet you want boolean behavior. The easiest fix is to use an extra computed observable to do the translation for you:
Assuming 'this' points to your viewmodel:
this.EligibleRadioHelper = ko.computed({
read: function () {
return this.Eligible().toString();
},
write: function (value) {
this.Eligible(value === 'true');
},
owner: this
});
Bind against this new helper:
data-bind="checked: completeVM.EligibleRadioHelper"
When you want the boolean value (for logic or for persisting) use your original observable.

Answer 2

You also can try using the checkedValue binding available in knockout 3 without the need to write a computed function for your view model.
Your code will become something like this:
<div>
#Html.LabelFor(model => model.Eligible)
#Html.RadioButtonFor(model => model.Eligible,"true", new { id="yes", data_bind = "checked: completeVM.Eligible, checkedValue: true" })
#Html.Label("yes", "YES")
#Html.RadioButtonFor(model => model.Eligible, "false", new {id="no", data_bind = "checked: completeVM.Eligible, checkedValue: false " })
#Html.Label("no", "No")