JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://andersmalmgren.github.io/Knockout.BindingConventions/src/Knockout.BindingConventions.js"></script>
<a href="#" data-name="click">Click me</a>
<span data-bind="text: ko.toJSON($data)"></span>

CSS

a.disabled {
	color: grey;
}

JavaScript

(function() {
    //First make KO able to disable clicks on Anchors
    var orgClickInit = ko.bindingHandlers.click.init;
    ko.bindingHandlers.click.init = function(element, valueAccessor, allBindingsAccessor, viewModel) {
        if (element.tagName === "A" && allBindingsAccessor().enable != null) {
            var disabled = ko.computed({
                read: function() {
                    return ko.utils.unwrapObservable(allBindingsAccessor().enable) === false;
                },
                disposeWhenNodeIsRemoved: element
            });
            ko.applyBindingsToNode(element, { css: { disabled: disabled } });
            var handler = valueAccessor();
            valueAccessor = function() {
                return function() {
                    if (ko.utils.unwrapObservable(allBindingsAccessor().enable)) {
                        handler.apply(this, arguments);
                    }
                };
            };
        }
        orgClickInit.apply(this, arguments);
    };

    //Second make the Convention library work with anchors
    ko.bindingConventions.conventionBinders.button.rules[0] = function(name, element, bindings, unwrapped, type) {
        return (element.tagName === "BUTTON" || element.tagName === "A") && type === "function";
    };
})();

ViewModel = function() {
  this.canClick = ko.observable(true);
  this.count = ko.observable(0);
};

ViewModel.prototype = {
  click: function(item) {      
    this.canClick(false);
		this.count(this.count() + 1);   
  }
};

ko.applyBindings(new ViewModel());