Knockout select dropdown disable item

You could choose to build your option elements using foreach like:

<select data-bind="value: selected, foreach: options">
    <option data-bind="attr: { disabled: !enabled(), value: value }, text: name"></option>
</select>

Sample: http://jsfiddle.net/rniemeyer/4PuxQ/

Otherwise, here is a sample of an optionsBind binding from Michael Best that would let you bind the option without using a foreach (uses optionsAfterRender functionality):

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

Sample: http://jsfiddle.net/rniemeyer/KxY44/


You can use optionsAfterRender for disabling options. You need to provide one more observable property to object for enabling or disabling the option.

Code:-

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


You need to use the optionsAfterRender to apply disabled to the options. It's discussed in the documentation: 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);
}

Here is a demo of it working: http://jsfiddle.net/vkFUC/