JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<a href="http://stackoverflow.com" data-bind="disableClick: !enabled()">test</a>
<br/><br/><br/>
<input type="checkbox" data-bind="checked: enabled"> enabled

CSS

.disabled_anchor {
    color: gray;
}

JavaScript

ko.bindingHandlers.disableClick = {
    init: function (element, valueAccessor) {
        
        $(element).click(function(evt) {
          alert('test before');
        });

        $(element).click(function(evt) {
            if(valueAccessor())            {
                evt.preventDefault();
                evt.stopImmediatePropagation();
            }
        });

        $(element).click(function(evt) {
          alert('test after');
        });
    },

    update: function(element, valueAccessor) {        
        var value = ko.utils.unwrapObservable(valueAccessor());
        ko.bindingHandlers.css.update(element, function() {return { disabled_anchor: value }; });
    }
};

ko.applyBindings({ enabled: ko.observable(false)});