JSFiddle - React, Tailwind, and code Playground

HTML

<input data-bind="value: canWrite" />
<input data-bind="value: readonly" />

<span data-bind="text: ko.toJSON($data)"></span>

JavaScript

ko.extenders.readonly = function(target, readonly) {
    var computed = ko.computed({
        read: target,
        write: function(value) {
            if(!computed.canWrite())
                throw "Observable in read only mode"
                
            target(value);
        }
    });
    
    computed.canWrite = ko.observable(!readonly);
    return computed;
};

ViewModel = function() {
    this.canWrite = ko.observable().extend({ readonly: false });
    this.readonly = ko.observable().extend({ readonly: true });
}

ko.applyBindings(new ViewModel());