[英]How can I disable/enable a drop down embedded in a table mapped to a knockout observable array
I'd like to disable/enable a drop down embedded in a table in a form until a particular value is selected in the predecessor drop down. 我想禁用/启用表格中嵌入的下拉菜单,直到在之前的下拉列表中选择特定值为止。
Here's what I tried that doesn't seem to work: 这是我尝试的似乎无效的方法:
<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>
Please find the associated fiddle here 请在这里找到相关的小提琴
To give a brief I want the "Uniform Type" drop down in each of the rows to be enabled in case the option "Female" is selected in the "Sex" drop down and it needs to be disabled in all other scenarios. 为了简单起见,我希望在“性别”下拉列表中选择“女性”选项并且在所有其他情况下都需要禁用的情况下,启用每一行中的“统一类型”下拉列表。
First, your sex
and uniform
properties have to be observable to allow for two way binding: 首先,必须观察到您的
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
]);
Then, in your enable
binding, you can use the live-updating value: 然后,在
enable
绑定中,您可以使用实时更新值:
enable: sex() ? (sex().id === 2) : false
// ^^ ^^
// Because this property is now observable, you need to call it to extract
// its value
In an updated fiddle: https://jsfiddle.net/ocd5qvr8/ 在更新的小提琴中: https : //jsfiddle.net/ocd5qvr8/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.