Knockout select dropdown disable item

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

---

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

---

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

链接地址: http://www.djcxy.com/p/83712.html

上一篇: 等到带有动画的功能结束后再运行另一个功能

下一篇: 淘汰选择下拉禁用项目