In my viewModel I define the property relative to the state of the select, the property bounded to the select value and a computed observable that "reads" the description of the selected option in the select:
AppViewModel: function () {
var self = this;
self.SelectVisible = ko.computed(function () {
return true; // return true or false depending on your context
}, self);
self.Category = ko.observable("");
self.CategoryText = ko.computed(function () {
return $("#Category option[value='" + self.Category() + "']").text();
}, self);
// other code ...
}
In the page I have a select always enabled and a readonly input whose visibility is mutually esclusive and depends on a viewModel property:
<select name="Category" id="Category" data-bind="value: Category, visible: SelectVisible">
<option value="S">Standard</option>
<option value="N">CatN</option>
<option value="C">CatC</option>
</select>
<input style="display: none;" type="text" readonly="readonly" data-bind="value: CategoryText, visible: !SelectVisible()"/>