Set radio button true load time using knockout js

Question

Hi please check my code belos

    <dl data-bind="foreach: MobileNos"  class="morenumbeList">
                <dd><a data-bind="click: $parent.delete" class="minus">-</a><span class="number" data-bind="text: mobileno"></span>
                    <input id="itemID"  data-bind="checked: $parent.SelectPrimary,attr : { id : 'Primary_' + $index() + ''} " type="radio" name="primary"/></dd>
            </dl>

My script :

var mobilenoList = function (mobileno, primary) {
    this.mobileno = mobileno;
    this.primary = primary;
};
var MobileSave = function (mobileno, primary) {
    this.mobileno = mobileno;
    this.primary = primary;
}



function AppViewModel() {
    var self = this;
    self.MobileNos = ko.observableArray();
    self.mobileno = ko.observable("");
    self.primary = ko.observable(false);
    self.itemID = ko.observable(0);

    self.SelectPrimary = ko.computed(function () {
        var mobnums = self.MobileNos();

        $.each(self.MobileNos(), function (index, mobile) {
            if (mobnums[index].primary) {
                return true;
            }
            else {
                return false;
            }
        });

    })

    self.MobileNos.subscribe(function () {
        var mobnums = self.MobileNos();
        for (var i = 0, j = mobnums.length; i < j; i++) {
            var MobileNo = mobnums[i];


            if (!MobileNo.index) {
                MobileNo.index = ko.observable(i + 1);
            } else {
                MobileNo.index(i + 1);
            }

        }
    });


    $.getJSON("/User/GetContactDetails/", { UserID: $('#UserId').val() }, function (MobileNos) {
        $.each(MobileNos.rows, function (index, mobnum) {

            self.MobileNos.push(new mobilenoList(mobnum.mobileno, mobnum.primary));
        })
     });
};

  $(document).ready(function () {
    ko.applyBindings(new AppViewModel());
  });

while I am loading page it should be select radio button , here I can get proper value in "self.MobileNos" but not able to check radio button according that

EDIT

                        <input id="itemID" value="false"  data-bind="checked: $parent.SelectPrimary,attr : { id : 'Primary_' + $index() + ''} " type="radio" name="primary"/></dd>
       self.SelectPrimary = ko.computed(function () {
        var mobnums = self.MobileNos();

        $.each(self.MobileNos(), function (index, mobile) {
            if (mobnums[index].primary == true) {
                return "true";
            }
            else {
                return "false";
            }
        });

    })

if got "mobnums[index].primary" is true than need to set radio button cheked — Lajja Thaker, Dec 19 '13 at 10:03

score 0 · Accepted Answer · edited May 23 '17 at 12:19

0

From "checked" binding 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 or the value specified by the checkedValue parameter.

So you need to:

Change your radio element markup to include value="true" because you want it to be selected if you got true.
Change your SelectPrimary function to return string values either "true" or "false".

You may also check this SO question for radio binding in KnockoutJS

Update:

Change your SelectPrimary to be like this:

self.SelectPrimary = ko.computed(function () {
    var mobnums = self.MobileNos();
    var toreturn = mobnums.some(function (item) {
        return item.primary == true;
    });
    return toreturn.toString()
})

The problem here in misuse $.each(). The value you return is only inside your anonymous function. In other words the retuen value is only for the $.each() callback not for your SelectPrimary function.
Array.prototype.some() Browser Compatibility

edited May 23 '17 at 12:19

Community

1
1

answered Dec 19 '13 at 10:21

ebram khalil

8,211
7
40
59

I have changed radio element markup and Change your SelectPrimary function but still not get response please check EDIT in post – Lajja Thaker Dec 19 '13 at 10:31
why you set your radio `value="false"` and not `value="true"` ? – ebram khalil Dec 19 '13 at 10:34
I have tried first value="true" but did not get proper response that is why set value="false" – Lajja Thaker Dec 19 '13 at 10:35
What i understand from your question is that if **any** of your `MobileNos` array objects contain a `primary` with `true` value then the radio button should be selected .. Is that right? – ebram khalil Dec 19 '13 at 11:12
How can I test if Primary is selected than return only that value, becoz currently it gives me last value as selected – Lajja Thaker Dec 19 '13 at 12:29
If my answer was useful to you, can you please mark it as correct – ebram khalil Dec 20 '13 at 11:26

Set radio button true load time using knockout js

1 Answers1