bootstrap selectpicker knockoutjs禁用选项

Question

我在js fiddle中有以下绑定。

<div class="container body-content"> 
    <div>Name : <span data-bind="text: Name"></span> 
    </div>The select control should be below 
    <select multiple data-bind="selectPicker: teamID, optionsText: 'text', optionsValue : 'id', selectPickerOptions: { optionsArray: teamItems, disabledOption: IsDisabled }"></select> 
    <div>Selected Value(s) 
     <div data-bind="text: teamID"></div> 
    </div> 
</div> 

我想这样做disabledOption的：IsDisabled然后加入

this.teamItems = ko.observableArray([{ 
     text: 'Chris', 
     id: 1, 
     IsDisabled: false 
    }, { 
    text: 'Peter', 
    id: 2, 
    IsDisabled: false 
}, { 
    text: 'John', 
    id: 3, 
    IsDisabled: false 

}]); 

我想知道如何禁用在选择一个选项。

Answer 1

在knockout docs中，有一个示例显示如何使用optionsAfterRender方法禁用项目。

关于您可以传递给它的方法：

• 它在你的视图模型，而不是在您的项目
• 它需要在选项HTML节点，该项它一定

所以第一步是找到一个地方来存储哪些项目被禁用。最简单的办法是将其存储您的teamItems“对象中：

{ 
    text: 'Chris', 
    id: 1, 
    disable: ko.observable(true) 
} 

现在，我们需要补充的是发生在一个项目，并创建一个绑定的方法。我们可以借此直接从例如：

this.setOptionDisable = function(option, item) { 
    ko.applyBindingsToNode(option, { 
    disable: item.disable 
    }, item); 
} 

最后，我们需要告诉淘汰赛调用这个方法：

<select multiple data-bind="optionsAfterRender: setOptionDisable, ... 

注意，在你的项目中的一个改变disable属性之后，你”必须手动拨打teamItems.valueHasMutated。

这里有一个更新的小提琴：

http://jsfiddle.net/nq56p9fz/