JSFiddle - React, Tailwind, and code Playground

by rniemeyer

HTML

<select data-bind="booleanValue: state">
    <option value="true">On</option>
    <option value="false">Off</option>
</select>

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

JavaScript

ko.bindingHandlers.booleanValue = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var observable = valueAccessor(),
            interceptor = ko.computed({
                read: function() {
                    return observable().toString();
                },
                write: function(newValue) {
                    observable(newValue === "true");
                }                   
            });
        
        ko.applyBindingsToNode(element, { value: interceptor });
    }
};

var model = {
    state: ko.observable(false)
};

ko.applyBindings(model)