knockout.js和禁用锚标记

如何使用此自定义绑定禁用和启用锚定标记。它可以很好地处理输入元素，但锚定标记只是更改CSS，而不是禁用

<a href="link" data-bind="myDisabled: !enabled()"/>

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

ko.bindingHandlers.myDisabled={
更新：函数（元素、值访问器）{
var value=ko.utils.unwrapobbservable（valueAccessor（））；
update（元素，函数（）{return{disabled:value}；}）；
bindingHandlers.disable.update（元素，valueAccessor）；
}
};

您需要在绑定处理程序中捕获单击事件

HTML：

<a href="link" data-bind="disableClick: !enabled()">test</a>
<br/><br/><br/>
<input type="checkbox" data-bind="checked: enabled"> enabled ​

ko.bindingHandlers.disableClick = {
    init: function (element, valueAccessor) {

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

    },

    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)});

​

以下是一个工作示例：

更新1：如果您需要在附加敲除绑定处理程序后阻止绑定其他事件处理程序，则需要将

stopImmediatePropagation

与

preventDefault

一起添加到事件处理程序中

例如：

更新2：如果要禁用所有事件处理程序（以及在绑定处理程序之前附加的单击事件处理程序，则需要“破解”jquery事件数组）。请注意，这可能不适用于其他版本的jquery（示例使用1.7）：

例如：

更新3：如前所述（，抱歉，我无法批准此完全正确的编辑，因为我来不及查看）：如果您使用的是jQuery 1.10.x，则需要添加下划线以访问“data”对象，如下所示：

var events = $._data(element, "events"); 

---

jQuery1.10.x的修订版fiddle:

我在寻找一种方法时发现了这个答案，但我不喜欢这种方法，我自己也不喜欢

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(function () {
            return ko.utils.unwrapObservable(allBindingsAccessor().enable) === false;
        });
        ko.applyBindingsToNode(element, { css: { disabled: disabled} });
        var handler = valueAccessor();
        valueAccessor = function () {
            return function () {
                if (ko.utils.unwrapObservable(allBindingsAccessor().enable)) {
                    handler.apply(this, arguments);
                }
            }
        };

    }
    orgClickInit(element, valueAccessor, allBindingsAccessor, viewModel);
};

它与本机单击并启用绑定无缝连接（未实现禁用绑定） Fiddle（Fiddle也使用我的约定而不是配置库）

---

以@Anders answer为灵感，我想出了自己的版本。允许使用带有或不带有“单击”的“启用”、“禁用”。还允许自定义禁用类，否则默认为“禁用”

这是我的方法：

JavaScript

(function () {
  var originalDisableUpdate = ko.bindingHandlers.disable.update;

  ko.bindingHandlers.disable.update = function (element, valueAccessor) {
      if (element.tagName === 'A') {
        var
          value = ko.utils.unwrapObservable(valueAccessor()),
          disabled = 'disabled';

        if (value) {
          element.setAttribute(disabled, null);
        }
        else {
          element.removeAttribute(disabled);
        }
      }
      else {
        originalDisableUpdate(element, valueAccessor);
      }
  };
})();

CSS

a[disabled] {
  pointer-events:none;
  cursor:default;
}

---

我只看到锚定标记通过将其onlick设置为false而被“禁用”。你想让锚“禁用”它是什么意思？只是为了确保它不会触发任何点击事件，并且在启用时，点击事件会被重新激活。作为替代，你可以使用KOs注释逻辑来生成不同的标记。请参阅：从jQuery1.8开始，您不能再通过该API访问数据。替换为

jQuery.\u data（key，value）

非常喜欢这个想法，主要缺点是必须定义一个“click”方法才能工作。请参阅我的答案，了解一个解决方案，该解决方案可以使用或不使用click defined。如果您希望在不使用click处理程序的情况下启用/禁用，则无法真正查看用例：D这里有一个版本支持disable@Anders，当您有一个带有一组href且无需单击的锚点时。这就是我的情况。但是href仍然会执行，这是唯一的css吗？您需要从click处理程序返回false，这样它就不会触发，您可以在包装器clikc中修复它handler@Anders你说得对。。。添加了处理该问题的代码。能够做到这一点，而不需要敲除点击处理程序。

(function () {
  var originalDisableUpdate = ko.bindingHandlers.disable.update;

  ko.bindingHandlers.disable.update = function (element, valueAccessor) {
      if (element.tagName === 'A') {
        var
          value = ko.utils.unwrapObservable(valueAccessor()),
          disabled = 'disabled';

        if (value) {
          element.setAttribute(disabled, null);
        }
        else {
          element.removeAttribute(disabled);
        }
      }
      else {
        originalDisableUpdate(element, valueAccessor);
      }
  };
})();

a[disabled] {
  pointer-events:none;
  cursor:default;
}