js复选框用于控制输入字段的启用/禁用状态

knockout.js checkboxes used to control enabled/disabled state of input fields

本文关键字：启用 状态 字段 复选框 用于 控制 输入 js      更新时间：2023-09-26

我试图将一个复选框绑定到对象列表中的每一行，以非常类似于这里问/回答的问题的方式:将对象列表绑定到复选框列表

基本上如下:

<ul data-bind="foreach: phones">
  <li>
    <input type='text' data-bind="attr: {value:phone}, disable: $root.selectedPhones"/>
    <input type="checkbox" data-bind="attr: {value:id}, checked: $root.selectedPhones" />
  </li>
</ul>
<hr/> selected phones:
<div data-bind="text: ko.toJSON($root.selectedPhones)"></div>
<hr/> phones:
<div data-bind="text: ko.toJSON($root.phones)"></div>

function Phone(id,phone) {
  this.id = id;
  this.phone = phone;
}
var phones_list = [
  new Phone(1, '11111'),
  new Phone(2, '22222'),
  new Phone(3, '33333')
];
var viewModel = {
  phones: ko.observableArray(phones_list),
  selectedPhones: ko.observableArray()
};
ko.applyBindings(viewModel);

这个想法是，在初始状态下，所有的输入框都是禁用的，单击复选框将启用该行中的输入框。

数据来自一个相当深嵌套的对象从服务器端，所以我想避免"填充"数据与一个额外的布尔值避免 new Phone(1,'xx', false)(a)因为它可能是不必要的(b)因为结构几乎肯定会改变…

selectedPhones可观察对象可以被enable/disable功能用来控制该"行"中字段的状态吗?

希望有人能帮忙....

这里有一个jsfield

您可以创建一个小的辅助函数来检查给定的id是否在selectedPhones中:

var viewModel = {
    phones: ko.observableArray(phones_list),
    selectedPhones: ko.observableArray(),
    enableEdit: function(id) {
        return ko.utils.arrayFirst(viewModel.selectedPhones(), 
           function(p) { return p == id })
    }
};

那么你可以在enable绑定中使用这个辅助函数:

<input type='text' data-bind="attr: {value:phone}, disable: $root.enableEdit(id)"/>

演示JSFiddle。

相关文章：