淘汰选择下拉禁用项目

目前我只能使用淘汰赛中的启用绑定来启用/禁用整个下拉菜单。当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，但我无法再访问选定的值。传入的项目只是选择项目的关键和值，而不是可观察项目。

任何帮助将不胜感激。由于

来源

2014-06-26 Michael Pang

你可以选择使用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/

否则，这里是一个optionsBind从麦可思结合的样本，将让你绑定选项不使用foreach（使用optionsAfterRender功能）：

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

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

来源

2014-06-26 03:07:04

[这里]（http://stackoverflow.com/questions/24303689/knockout-multiselect-selectedoptions-contains-值而不是对象/ 24303773＃24303773）是另一种方式。需要3.1.0 –

您可以使用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); 
    }

Fiddle Demo

来源

2014-06-26 03:09:46 Akhlesh

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

来源

2014-06-26 03:11:58

伟大的解决方案。谢谢。当使用这个时，如果使用optionsCaption绑定，一定要处理这个案例。 –

淘汰选择下拉禁用项目

回答

相关问题