0

我想禁用/启用嵌入表格中的下拉列表，直到在前一个下拉列表中选择特定值。

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

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

请在此处找到相关的小提琴

简而言之，我希望启用每一行中的“统一类型”下拉菜单，以防在“性别”下拉菜单中选择了“女性”选项并且需要在所有其他情况下禁用它。

4

1 回答 1

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

在更新的小提琴中：https ://jsfiddle.net/ocd5qvr8/

于 2018-11-23T13:55:22.967 回答