Radio buttons Knockoutjs
knockout-2.0, knockout.js
Solution
The `checked` binding works differently for radio buttons and checkboxes:
From the documentation:
For radio buttons, KO will set the element to be checked if and only if the parameter value equals the radio button node’s `value` attribute. So, your parameter value should be a string.
So you need to set the `value` attribute of your inputs to "A" and "B" and then bind to the `radioSelectedOptionValue` which will contain "A" or "B" depending on which options is selected:
<label>
<input name="Test" type="radio" value="A"
data-bind="checked: radioSelectedOptionValue" />
Alpha
</label>
<label>
<input name="Test" type="radio" value="B"
data-bind="checked: radioSelectedOptionValue" />
Beta
</label>
If you want to keep your boolean properties: `A` and `B`, you need to make them `ko.computed` (read-only, writable) which will use/convert the value of the `radioSelectedOptionValue`:
this.radioSelectedOptionValue = ko.observable();
this.A = ko.computed( {
read: function() {
return this.radioSelectedOptionValue() == "A";
},
write: function(value) {
if (value)
this.radioSelectedOptionValue("A");
}
}, this);
Demo JSFiddle.
Problem
I have 2 values that I get from server A and B. I can only have one true at a time. Again what I need is one of the radios to be checked at a time so one true value only. ``` var viewModel = { radioSelectedOptionValue: ko.observable("false"), A: ko.observable("false"), B: ko.observable("false") }; ko.applyBindings(viewModel); ``` ``` <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script> <div class='liveExample'> <h3>Radio View model</h3> <table> <tr> <td class="label">Radio buttons:</td> <td> <label><input name="Test" type="radio" value="True" data-bind="checked: A" />Alpha</label> <label><input name="Test" type="radio" value="True" data-bind="checked: B" />Beta</label> </td> </tr> </table> A-<span data-bind="text: A"></span> B-<span data-bind="text: B"></span> </div> ```