jquery - knockout 选择下拉禁用项目

Question

目前我只能使用 knockout 中的启用绑定(bind)来启用/禁用整个下拉列表。当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>

这样我仍然可以看到我的选项，但它们都被禁用，因此用户无法更改它们。

我已经查看了 knockout 中的 optionsAfterRender，但我无法再访问所选值。传入的项目只是选择项目的键和值，而不是可观察的。

任何帮助将不胜感激。谢谢

Answer 1

您可以选择使用 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 绑定(bind)示例，它可以让您在不使用 foreach 的情况下绑定(bind)选项(使用 optionsAfterRender 功能):

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

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