当选择当前行时，KnockoutJS选中了单选按钮

Posted 2021-05-05

我有一个如下列表;

单击列表行编辑之一时，我想在用户表单中设置单选按钮。

我的单选按钮的html像;

<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>

和单选按钮的点击绑定就像;

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

最后，它是点击编辑按钮时的功能;

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

我读了一些关于检查绑定但我没有解决问题。

答案

您不使用单击绑定与单选按钮。

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>

另一答案

您应该能够将单选按钮直接绑定到genderId中的currentUser observable：

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

以上是关于当选择当前行时，KnockoutJS选中了单选按钮的主要内容，如果未能解决你的问题，请参考以下文章

如何确定是不是选中了单选按钮？ [复制]

检查是不是选中了单选按钮jquery [重复]

如果使用 PHP 选择了单选按钮（当前），如何在 Mysql 数据库中为出勤值添加 +1？

如果在 Sonata Admin 中选择了单选按钮，如何禁用单选按钮

Tkinter：所有单选按钮都已被选中

离子单选按钮验证