JSFiddle - React, Tailwind, and code Playground

by Jeroen Heijmans

HTML

<h2 data-bind="text: txt"></h2>
<label>
    Text input: 
    <input type="text" data-bind="value: txt, attr: { readonly : isReadOnly }" />
</label>
<input type="checkbox" data-bind="checked: isReadOnly" />Read Only

CSS

input[readonly="true"]
{
    color: #666;
    background-color: #EEE;
}

JavaScript

ko.applyBindings(new function() {
    this.txt = ko.observable("test text");
    this.isReadOnly = ko.observable(false);    
});