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＆＃39;对象：

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

现在，我们需要添加一个接收项目并创建绑定的方法。我们可以从示例中直接看出这一点：

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

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

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

请注意，更改某个项目中的disable媒体资源后，您必须手动拨打teamItems.valueHasMutated。

这是一个更新的小提琴：

http://jsfiddle.net/nq56p9fz/

bootstrap selectpicker knockoutjs禁用选项

1 个答案: