JSFiddle - React, Tailwind, and code Playground

HTML

<script id="TextboxTemplate" type="text/html">
    <input data-bind="value: field, valueUpdate: 'afterkeydown', readOnly: readOnly" type="text">
</script>


<script id="RowTextboxTemplate" type="text/html">
<td>
    <h3>
    <span data-bind="text: caption" />
    </h3>
</td>
<td data-bind="template: { name: 'TextboxTemplate', data: { field: property, readOnly: $data.readOnly !== undefined ? $data.readOnly : false } }" />
</script>




 <table>
     <tbody>
        <tr data-bind="template: { name: 'RowTextboxTemplate', data: { caption: 'Normal Field', property: Property1 } }"/>
        <tr data-bind="template: { name: 'RowTextboxTemplate', data: { caption: 'Read-only Field', property: Property2, readOnly: IsReadOnly } }" />
     </tbody>
 </table>
Make read-only <input type="checkbox" data-bind="checked: IsReadOnly" />

JavaScript

ko.bindingHandlers.readOnly = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if (value) {
            element.setAttribute("readOnly", true);
        } else {
            element.removeAttribute("readOnly");
        }
    }
}

var TestViewModel = {
    Property1: ko.observable(),
    Property2: ko.observable(),
    IsReadOnly: ko.observable(true)
};

ko.applyBindings(TestViewModel);