我如何 disable/enable 嵌入 table 的下拉菜单映射到一个可移除的可观察数组

Question

我想 disable/enable 将下拉列表嵌入到表单的 table 中，直到在前一个下拉列表中选择特定值。

这是我尝试过但似乎不起作用的方法：

<tbody data-bind="foreach:studentData">
    <tr>
        <td><span data-bind="text:rollNo"></span></td>
        <td><select class="form-control" data-bind="options:$parent.sexDropDown,optionsText:'name',optionValue:'id',value:sex,optionsCaption:'-Select-'"></select></td>
        <td><select class="form-control" data-bind="options:$parent.uniformTypeDropDown,optionsText:'name',optionValue:'id',value:uniform,enable:sex? (sex.id == 2):false,optionsCaption:'-Select-'"></select></td>
    </tr>
</tbody>

请查找关联的 fiddle here

简而言之，我希望启用每一行中的 "Uniform Type" 下拉菜单，以防在 "Sex" 下拉菜单中选择 "Female" 选项并且需要在所有其他情况下禁用。

Answer 1

首先，您的 sex 和 uniform 属性必须是可观察的以允许双向绑定：

self.studentData  = ko.observableArray([
  { rollNo: 1, sex: ko.observable(null), uniform: ko.observable(null) }
  //                ^^^^^^^^^^^^^^    ^           ^^^^^^^^^^^^^^    ^
  // This allows the `value` binding to write to the property
]);

然后，在您的 enable 绑定中，您可以使用实时更新值：

enable: sex() ? (sex().id === 2) : false
//         ^^       ^^
// Because this property is now observable, you need to call it to extract
// its value

在更新后的 fiddle 中：https://jsfiddle.net/ocd5qvr8/

我如何 disable/enable 嵌入 table 的下拉菜单映射到一个可移除的可观察数组

How can I disable/enable a drop down embedded in a table mapped to a knockout observable array

knockout.js

knockout-binding-handlers