protectDefault () `click` в Knockout.js 3

Вы должны использовать disabled attr, чтобы отключить элемент. Вы можете иметь дело с визуальным стилем, используя это:

a:disabled {
    color: red;
}

Вы также можете проверить класс отключения внутри функции нокаута (не рекомендуется, просто пример). Вот так http://jsfiddle.net/mCxjz/81/

Я обновил ваш код в соответствии с вашими требованиями. Что я понимаю из jQuery, так это то, что выполнение .click только привязывает больше событий к элементу. Следующий код переопределяет существующий обработчик кликов.

$._data($(elem)[0], 'events').click[0].handler = function() {return;}

Если вы хотите вернуть свою старую функцию, возможно, сохраните ее в var и переназначьте позже. Надеюсь это поможет.

http://jsfiddle.net/mCxjz/84/

Есть несколько способов, которые я мог бы придумать, чтобы вы справились с этим требованием.

В этом рабочем примере я поместил несколько вариантов, чтобы вы могли их посмотреть: http: // plnkr. сотрудничество / редактировать / t1jG3JmsywxteRyNNKS4 ? р = предварительный просмотр.

Я также разбудил ваш JSFiddle здесь http://jsfiddle.net/8pa84cmu/1/

<p>Option 1 - Applying the disabled class, leave button clickable but check for class in click handler and do nothing</p>
<button class="disabled" data-bind="click: RegisterClick">Click</button>
<hr/>
<p>Option 2 - An enabled button doing what the click handler asks</p>
<button class="enabled" data-bind="click: RegisterClick">Click</button>
<hr/>
<p>Option 3 - A binding using a boolean to apply the class name if required and disabling it if required</p>
<button data-bind="click: RegisterClick, css: { disabled }, disable: disabled">Click</button>
<hr/>
<p>Option 4 - A binding just dealing with enabling / disabling</p>
<button data-bind="click: RegisterClick, enable: IsEnabled">Click</button>

var ViewModel = function() {
  this.RegisterClick = function(model, event) {
    if (event.target.className === "disabled") {
      return;
    }

    console.log("Clicked");
  }

  this.disabled = true;
  this.IsEnabled = false;
}

window.onload = function() {
  ko.applyBindings(new ViewModel());
}

Вот как вы можете управлять стилем элемента, и чтобы обратный вызов учитывал этот стиль. Если бы у вас было 20 элементов, которые вы хотели бы совместить, вы бы использовали одну и ту же наблюдаемую для каждого из них. Этот пример создает три кликабельных участка и отключает их через 2,5 секунды. Вы можете увидеть изменение стиля.

var viewModel = {
  isDisabled: ko.observable(false),
  alerting: function(data, event) {
    if ($(event.target).hasClass('disabled')) return;
    alert(event.target.innerHTML);
  }
};

ko.applyBindings(viewModel);

setTimeout(function () {
	viewModel.isDisabled(true);
}, 2500);

.clickable {
  border-radius: 5px;
  padding: 5px;
  background-color: lightgreen;
  cursor: pointer;
}
.disabled {
  background-color: lightgray;
  cursor: not-allowed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<span class="clickable" data-bind="click: alerting, disabled: isDisabled, css: {disabled: isDisabled}">One</span>
<span class="clickable" data-bind="click: alerting, disabled: isDisabled, css: {disabled: isDisabled}">Two</span>
<span class="clickable" data-bind="click: alerting, disabled: isDisabled, css: {disabled: isDisabled}">Three</span>