JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" data-bind="checked: isChecked" />
<input type="textbox" data-bind="value: someText, valueUpdate: 'afterkeydown', selectSuggestion: someText" />

<p>Read only values:</p>
<p>
    isChecked = <span data-bind="text: isChecked"></span>
    <br />
    someText = <span data-bind="text: someText"></span>
</p>

JavaScript

var suggestion = "<enter something>";

ko.bindingHandlers.selectSuggestion = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var currentText = ko.utils.unwrapObservable(valueAccessor());
        if (currentText === suggestion) element.select();
    }
};

var ViewModel = function() {
    var self = this;
        
    var privateIsChecked = ko.observable(false);
    var privateText = ko.observable("EEE");
    
    self.isChecked = ko.computed({
        read: privateIsChecked,
        write: function(value) {
            if (privateIsChecked()) {
                privateText("");
            }
            else{
            privateText();
            }
            privateIsChecked(value);
        }
    });
    
    self.someText = ko.computed({
        read: privateText,
        write: function(value) {
            privateIsChecked(value !== "");
            
            privateText(value);
        }
    });
}

ko.applyBindings(new ViewModel());