CODEWITHSUNDEEP
javascriptjqueryhtmlknockout.js
arslanaybars
arslanaybars

Reputation: 1853

KnockoutJS checked radio button when current row selected

I have a list like below;

enter image description here

I would like to set radio button in user form when one of list row edit clicked.

My radio button's html like;

<form data-bind="submit: saveUser" class="form-horizontal">
    <div class="form-group">
        <div class="col-md-10">
            <input type="text" class="form-control" placeholder="Name" data-bind="value: currentUser().name" />
        </div>
    </div>


    <!--Gender-->
    <div class="form-group">
        <div class="col-md-10" data-bind="foreach: genders">
            <input type="radio" name="genderGroup" data-bind="checked: $root.radioGender, value: id" style="margin: 5px"/><span data-bind="text: name"></span>
        </div>
    </div>


    <!--Role-->
    <div class="form-group">
        <div class="col-md-10">
            <select class="form-control" data-bind="options: $root.roles, optionsText: 'name', optionsValue: 'id',value: currentUser().roleId, optionsCaption: 'Choose Component'"></select>
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-10">
            <button type="submit" class="btn">Save User</button>
        </div>
    </div>
</form>

and radio button's click bind is like;

self.radioGender = function (gender) {
self.currentGender(gender);
if (gender !== self.selectedGender()) {
    self.selectedGender(gender);            
    self.currentUser().genderId(gender.id());
} 
    return true;
};

finally, it's the function when Edit button clicked;

self.modifyUser = function (user) {
    self.radioGender(self.currentGender());
    self.currentUser(user);
}

I read something about checked binding but I didn't resolve the problem.

Upvotes: 0

Views: 260

Answers (2)

Michael Best
Michael Best

Reputation: 16688

You should be able to bind your radio button directly to the genderId observable in currentUser:

data-bind="checked: $parent.currentUser().genderId, value: id"

Upvotes: 0

Tomalak
Tomalak

Reputation: 338326

You don't use click bindings with radio buttons.

ko.applyBindings({
  radioGender: ko.observable(0),
  genders: [
    {id: 0, name: 'undefined'},
    {id: 1, name: 'female'},
    {id: 2, name: 'male'}
  ]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="foreach: genders">
  <label>
    <input type="radio" data-bind="checked: $root.radioGender, value: id"/><span data-bind="text: name"></span>
  </label>
</div>

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

Also: You don't need name attributes with knockout. But you should read about the uniqueId and uniqueFor custom bindings to get label elements to work.

Using the value binding with $data gives you this behavior:

ko.applyBindings({
  radioGender: ko.observable(0),
  genders: [
    {id: 0, name: 'undefined'},
    {id: 1, name: 'female'},
    {id: 2, name: 'male'}
  ]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="foreach: genders">
  <label>
    <input type="radio" data-bind="checked: $root.radioGender, value: $data"/><span data-bind="text: name"></span>
  </label>
</div>

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

I find this more useful than confining myself to a single property of the object in question, but it's not compatible to traditional (non-Ajax) form submits.

Upvotes: 2

Related Questions