JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="text" data-bind="attr: { 'disabled': getDisabledState() }" />
    <button data-bind="click: enable">Enable/Disable</button>
</div>
<div>
    <input type="text" data-bind="attr: { 'readonly': getreadonlyState() }" value="Some Value" />
    <button data-bind="click: readonly">Readonly/NotReadonly</button>
</div>

JavaScript

var ViewModel = function() {
    var self = this;
    self.getDisabledState = ko.observable(null);
    self.getreadonlyState = ko.observable(null);
    self.enable = function() {
        if (self.getDisabledState()) self.getDisabledState(undefined);
        else self.getDisabledState('disabled');
    }
    self.readonly = function() {
        if (self.getreadonlyState()) self.getreadonlyState(undefined);
        else self.getreadonlyState('readonly');
    }
}

ko.applyBindings(new ViewModel());