Disabilita selezione drop down disabilita l'articolo

Question

Attualmente sono solo in grado di abilitare/disabilitare l'intera discesa utilizzando il binding abilitato in knockout. Se Enable = false, l'intera discesa non è più selezionabile e l'utente non può vedere gli altri valori possibili nel menu a discesa.

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

cosa ma ho reso è questo:

<select disabled=""></select> 

Quello che sto sperando di fare è rendere qualcosa di simile

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

In questo modo posso ancora vedere le mie opzioni, ma sono tutti disabilitati quindi l'utente non può cambiarli.

Ho esaminato le opzioniAfterRender in knockout, ma non ho più accesso al valore selezionato. l'elemento passato è solo la chiave e il valore dell'elemento selezionato, non l'osservabile.

Qualsiasi aiuto sarebbe molto apprezzato. Grazie

Answer 1

Si può scegliere di costruire la vostra option elementi utilizzando foreach come:

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

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

In caso contrario, ecco un campione di un optionsBind vincolante da Michael migliore che avrebbe lasciato si associa il opzione senza utilizzare un foreach (utilizza la funzionalità optionsAfterRender):

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

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

Answer 2

È possibile utilizzare opzioniAfterRender per le opzioni di disabilitazione. È necessario fornire un'altra proprietà osservabile all'oggetto per abilitare o disabilitare l'opzione.

Codice: -

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

È necessario utilizzare l'optionsAfterRender per applicare disabile alle opzioni. E 'discussa nella documentazione: 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); 
} 

Ecco una demo di farlo funzionare: http://jsfiddle.net/vkFUC/