JSFiddle - React, Tailwind, and code Playground

by nickkell

HTML

<select data-bind="disableOptionsCaption: { options: requestReasons, optionsText: 'description', optionsCaption: 'Please select' }, value: selectedRequestReason"></select>

<div data-bind="text: ko.toJSON(selectedRequestReason)"></div>

JavaScript

function disableOptionsCaption() {
    return {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            var v = valueAccessor(), bindings = {
                options: v.options,
                optionsCaption: v.optionsCaption,
                optionsText: v.optionsText,
                optionsAfterRender: function (option, item) {
                    ko.applyBindingsToNode(option, {
                        disable: !item
                    }, item);
                }
            };

            if (v.optionsValue) {
                bindings.optionsValue = v.optionsValue;
            }

            ko.applyBindingsToNode(element, bindings, viewModel);
        }
    };
}

ko.bindingHandlers.disableOptionsCaption = disableOptionsCaption();


var vm = {
    selectedRequestReason: ko.observable(),
    requestReasons: [{
        description: 'reason',
        id: 1        
    }]
};

ko.applyBindings(vm);