淘汰选择下拉禁用项目
目前我只能使用knockout中的启用绑定来启用/禁用整个下拉菜单。 当Enable = false时，整个下拉菜单不再可点击，并且用户在下拉菜单中看不到其他可能的值。
<select data-bind="options: OptionsList, optionsText: 'Key', optionsValue: 'Value', value: FieldValue, enable: Enable"></select>
得到的是这样的：
<select disabled=""></select>
我希望做的是呈现这样的东西
<select>
<option disabled="disabled" value='1'>One </option>
<option selected="select" value='2'>Two </option>
<option disabled="disabled" value='3'>Three </option>
</select>
这样我仍然可以看到我的选项，但它们都被禁用，因此用户无法更改它们。
我在淘汰赛中查看了optionsAfterRender，但我无法再访问选定的值。 传入的项目只是选择项目的关键和值，而不是可观察项目。
任何帮助将非常感激。 谢谢
您可以选择使用foreach构建option元素，如：
<select data-bind="value: selected, foreach: options">
<option data-bind="attr: { disabled: !enabled(), value: value }, text: name"></option>
</select>
示例：http://jsfiddle.net/rniemeyer/4PuxQ/
否则，下面是一个来自Michael Best的optionsBind绑定示例，它允许您在不使用foreach的情况下绑定选项（使用optionsAfterRender功能）：
<select data-bind="value: selected, options: options, optionsText: 'name', optionsValue: 'value', optionsBind: 'attr: { disabled: !enabled() }`"></select>'
示例：http://jsfiddle.net/rniemeyer/KxY44/
您需要使用optionsAfterRender将禁用应用于选项。 在文档中讨论它：http://knockoutjs.com/documentation/options-binding.html
<select data-bind="options: OptionsList, optionsText: 'Key', optionsValue: 'Value', value: FieldValue, optionsAfterRender: setOptionDisable"></select>
self.setOptionDisable = function(option, item) {
ko.applyBindingsToNode(option, {disable: item.disable}, item);
}
这是它的工作演示：http://jsfiddle.net/vkFUC/
您可以使用optionsAfterRender来禁用选项。 您需要提供一个可观察的属性来反对启用或禁用该选项。
码：-
//Optionlist will look like this
OptionsList: ko.observableArray([{
Key: 1,
Value: "Jack",
disable: ko.observable(false)
}, {
Key: 2,
Value: "Jhon",
disable: ko.observable(false)
}]),
//Function will be used in optionsAfterRender
setOptionDisable: function (option, item) {
ko.applyBindingsToNode(option, {
disable: item.disable
}, item);
}
小提琴演示
链接地址: http://www.djcxy.com/p/83711.html