JSFiddle - React, Tailwind, and code Playground

by Gabriel Tran

HTML

<input class='testInput' type="text" data-bind="attr: { disabled: isDisabled }, attrRemoveWhenFalse: true" />
<button data-bind='click: function () { isDisabled(!isDisabled()); }'>Toggle</button>
<div data-bind='html: hasAttributeDisabled'></div>

JavaScript

var originalAttr = { init: ko.bindingHandlers.attr.init, update: ko.bindingHandlers.attr.update }
ko.bindingHandlers.attr.update = function (element, valueAccessor, allBindingAccessor, viewModel, bindingContext) {
    if (typeof originalAttr.update === 'function') originalAttr.update(element, valueAccessor, allBindingAccessor, viewModel, bindingContext);
    if (allBindingAccessor().attrRemoveWhenFalse) {
        for (var prop in valueAccessor()) {
            if (!ko.utils.unwrapObservable(valueAccessor()[prop])) {
                element.removeAttribute(prop);
            }
        }
    }
}

var viewmodel = function () {
    var self = this;
    this.isDisabled = ko.observable(true);
    this.hasAttributeDisabled = ko.computed(function () {
        return 'ViewModel.isDisabled: ' + self.isDisabled()
        + '<br />Markup has attribute: ' + document.getElementsByClassName("testInput")[0].hasAttribute('disabled');
    });
}

ko.applyBindings(new viewmodel());