CODEWITHSUNDEEP
asp.net-mvcknockout.js
NayeemKhan
NayeemKhan

Reputation: 1230

how to set radio button checked using knockout.js?

I have two radio buttons. 

<td>
    <div style="display: inline; margin-right: 10px">
         <input type="radio" name="USGlobalUser" data-bind:"checked:IsGlobal/>US
    </div>
    <div style="display: inline">
         <input type="radio" name="USGlobalUser" data-bind:"checked:IsGlobal"/>Global
    </div>
</td>

I am populating my model like this

QuestionnaireModel = function (data) {
  self.IsGlobal = ko.protectedObservable(data ? data.IsGlobal : false);
}

The value is coming from DB perfectly and its getting populated in self.IsGlobal as true/false. Based upon this true/false, I want to set my radio button checked.

Upvotes: 5

Views: 14760

Answers (4)

Aleksandrs Šaiters
Aleksandrs Šaiters

Reputation: 11

It`s much more simple. If you want to store something different from string in observable attached to radio buttons just set checkedValue binding for each radio button to same value as html element.

<div style="display: inline; margin-right: 10px">
    <input type="radio" name="USGlobalUser" data-bind="checked: IsGlobal, checkedValue: false" value="false" />US</div>
<div style="display: inline">
    <input type="radio" name="USGlobalUser" data-bind="checked: IsGlobal, checkedValue: true" value="true" />Global</div>
var QuestionnaireModel = function (data) {
    var self = this;
    self.IsGlobal = ko.observable(data ? data.IsGlobal : false);
}

ko.applyBindings(new QuestionnaireModel({
    IsGlobal: true
}))

Upvotes: 1

NayeemKhan
NayeemKhan

Reputation: 1230

Value from DB is boolean True/False

I changed in viewmodel :

self.IsGlobal = ko.protectedObservable(data ? data.IsGlobal.toString() : "");

and in cshtml :

<td>
    <div style="display: inline; margin-right: 10px">
       <input type="radio" name="USGlobalUser" value="false" data-bind="checked:IsGlobal()" />US                         
    </div>
    <div style="display: inline">
       <input type="radio"  name="USGlobalUser" value="true" data-bind="checked:IsGlobal()" />Global
    </div>
</td>

Upvotes: 2

nemesv
nemesv

Reputation: 139778

The checked binding works differently for radio buttons:

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 your IsGlobal should hold a string and you need to have the same string as the value of the radio buttons:

<input type="radio" name="USGlobalUser" 
       data-bind="checked: IsGlobalCheckbox" value="false" />US
<input type="radio" name="USGlobalUser" 
       data-bind="checked: IsGlobalCheckbox" value="true" />Global

And in your viewmodel:

self.IsGlobal = ko.observable(data ? data.IsGlobal + "" : "false");

If you want to keep the IsGlobal to store a boolean value you need to create a new computed property for the radio button which does the conversion:

self.IsGlobalCheckbox = ko.computed({
    read: function() {
        return self.IsGlobal() + "";
    },
    write: function (v) {
        if (v == "true") self.IsGlobal(true)
        else self.IsGlobal(false)
    }
});

Demo JSFIddle.

And by the way as Tomas noted your binding systax is broken in your sample.

Upvotes: 14

Tomas Kirda
Tomas Kirda

Reputation: 8413

After data-bind attribute should be equality sign instead of colon.

<input type="radio" name="USGlobalUser" data-bind="checked:IsGlobal"/>

Upvotes: 0

Related Questions