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) {
      if(element.tagName === "A" && allBindingsAccessor().enable != null) {
        var disabled = ko.computed(function() {
          return ko.unwrap(allBindingsAccessor().enable) === false;
        });
        ko.applyBindingsToNode(element, { css: { disabled: disabled}  });
          var handler = valueAccessor(); 
          valueAccessor = function() {
              return function() {
                if(ko.unwrap(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());