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/