Knockout select dropdown disable item

Question

Currently I'm only able to enable/disable the entire drop down using the enable binding in knockout. When Enable = false, the whole drop down is no longer clickable, and user cannot see the other possible values in the drop down.

<select data-bind="options: OptionsList, optionsText: 'Key', optionsValue: 'Value', value: FieldValue, enable: Enable"></select>

what got rendered is this:

<select disabled=""></select>

What I'm hoping to do is render something like this

<select> 
<option disabled="disabled" value='1'>One </option> 
<option selected="select"   value='2'>Two </option> 
<option disabled="disabled" value='3'>Three </option>   
</select>

This way I can still see my options but they are all disabled so the user can't change them.

I have looked at the optionsAfterRender in knockout, but I no longer have access to the selected value. the item passed in is just the key and value of the select item, not the observable.

Any help would be much appreciated. Thanks

Answer 1

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/

Answer 2

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/