敲除选择下拉禁用项目

Question

目前我只能使用敲除中的启用绑定启用/禁用整个下拉列表.当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,但我无法再访问所选值.传入的项只是选择项的键和值,而不是可观察项.

任何帮助将非常感激.谢谢

Answer 1

您可以选择option使用foreach以下内容构建元素:

<select data-bind="value: selected, foreach: options">
    <option data-bind="attr: { disabled: !enabled(), value: value }, text: name"></option>
</select>

示例:http://jsfiddle.net/rniemeyer/4PuxQ/

否则,以下是optionsBindMichael Best 的绑定示例,它允许您在不使用foreach的情况下绑定选项(使用optionsAfterRender功能):

<select data-bind="value: selected, options: options, optionsText: 'name', optionsValue: 'value', optionsBind: 'attr: { disabled: !enabled() }`"></select>'

示例:http://jsfiddle.net/rniemeyer/KxY44/

Answer 2

您需要使用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/