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/

否则，以下是Michael Best的optionsBind绑定示例，可让您在不使用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/

Answer 3

您可以使用optionsAfterRender来禁用选项。您需要为object提供一个可观察的属性，以启用或禁用该选项。

代码： -

  //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

Answer 4

对于版本testOptions.unitTests.includeAndroidResources = true，如果您想继续使用mbest解决方案（我个人认为这非常有用且优雅），只需用chrisknoll对此建议的解决方法的调用替换3.5.0：< / p>

ko.contextFor

mbest的原始自定义bindingHandler将被修改如下：

function contextForNodeOrNearestParent(node) {
    // Proposed fix for 3.5.0 ko.contextFor   https://github.com/knockout/knockout/pull/2447/files
    var context = ko.contextFor(node);
    if (!context && node.parentNode) {
        return contextForNodeOrNearestParent(node.parentNode);
    }
    return context;
}

这对我的项目很有帮助。我将其张贴在这里，以防它可以节省某人的时间，并供将来个人参考。

敲除选择下拉禁用项目

4 个答案: