我需要禁用在HTML knockout.js的foreach循环内的锚标记。
这里是我的代码：
<a id="aQStreamSkype" data-bind="attr:{href: ''}, click: $parent.StoreUserClick,disable: ($data.SkypeId == 'null')">Skype </a>
Answer 1:
锚标签不能被禁用 。
最简单的就是用ko if binding ，然后呈现一个span来代替的anchor如果Skype号码为空
<!-- ko if: skypeId === null -->
<span >No Skype Id</span>
<!-- /ko -->
<!-- ko if: skypeId !== null -->
<a id="aQStreamSkype" data-bind="attr:{href: ''}, click: $parent.StoreUserClick,text: skypeId"></a>
<!-- /ko -->
这里是一个小提琴
Answer 2:
如果没有href的属性， a一个元素，但只有一个动作click binding ，那么一个简单的方法将被路过的表达condition && handler ，以点击绑定。
如果条件是可观的，你需要添加括号。
<a data-bind="click: flag1() && handler">Enabled link</a>
<a data-bind="click: flag2() && handler">Disabled link</a>
这将被评估为false ，如果条件是false （所以什么都不会发生），
并且将被评估为处理程序，如果条件为true 。
这里拨弄
Answer 3:
禁用仅适用于表单元素，没有锚标记。 您可以使用可视绑定，而不是，只是隐藏链接，如果没有用户ID。 如果你想展示一些东西，即使没有用户ID，然后添加一个跨度相对可见的测试，然后一会显示，如果有一个用户ID和其他如果不存在：
<a id="aQStreamSkype" data-bind="attr:{href: ''}, click: $parent.StoreUserClick, visible: ($data.SkypeId !== 'null')">Skype </a>
<span class="notLink" data-bind="visible: ($data.SkypeId === 'null')">Skype </span>
作为一个侧面说明，如果SkypeId是可观察到的，你需要调用它作为一个在您的比较检查：
($data.SkypeId() !== 'null')
Answer 4:
首先，有想法与我有一些同情，说的一所学校就是不去做 。 什么也不做超链接是文本。
不过，我可以看到硬币的另一面 - 我遇到同样的问题来了，因为我使用的包含锚标记的菜单选项的引导下拉菜单，在我看来，它提供了更好的用户体验，以显示菜单选项残疾而不仅仅是没有表现出他们的一切，我觉得这是清洁剂“禁用”的超级链接，而不是包含的超链接标记和span有相同的文字，然后有条件地显示一个或另一个。 所以，我的解决办法是：
<a data-bind="click: checkCondition() ? myFunction : null, css: { disabled: !checkCondition() }"></a>
需要注意的是checkCondition()是返回true或false，indcating链接是否应该启用与否的功能。 在css结合仅仅是造型的超级链接出现禁用-您可能需要添加自己的.disabled如果你不使用引导CSS类。
这一工作的关键是锚没有href属性，所以它没用，因为没有淘汰赛的超链接click绑定，这意味着你可以很容易地使用此方法与任何元素类型（例如，这可能是一个可点击的span为容易作为锚点）。 不过，我希望让我的造型继续进行，没有任何额外的工作，以适用于使用的锚。
Answer 5:
对于某些覆盖魔术没有您的视图或视图模型代码需要改变，你可以得到这样的行为
(function () {
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);
};
})();
当您包含的代码启用绑定将用于anhors工作
小提琴，它使用我的约定库，以便忽略的那部分http://jsfiddle.net/xCfQC/4/
Answer 6:
淘汰赛启用/禁用绑定不支持锚标记 。
所以，你有2个解决这个。
解决方法1
<a href='#' title="Skype" data-bind='click: function() {
if(($data.SkypeId !== 'null'))
{
//call the desired method from here
}' >
解决方案2
此按钮显示只有当你的条件是成功的，它有点击绑定
<a data-bind="click: $parent.StoreUserClick, visible: ($data.SkypeId != 'null')" href="#" title="Skype">
这个按钮显示只有当你的消极条件是成功的，它不具有约束力点击
<a data-bind="visible: ($data.SkypeId == 'null')" href="#" title="Skype ">
Answer 7:
我发现ko.plus它实现命令图案优异的库。 “操作”不能被执行，直到“canExecute”条件为真。
var vm = { enabled: ko.observable(false), StoreUserClick: ko.command({ action: function () { window.alert('Command is active') }, canExecute: function () { return vm.enabled(); } }) } ko.applyBindings(vm); a.disabled { color: gray; text-decoration: none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script src="https://raw.githubusercontent.com/stevegreatrex/ko.plus/master/dist/ko.plus.js"></script> <a href="" id="aQStreamSkype" data-bind="click: StoreUserClick, css: { disabled: !StoreUserClick.canExecute() }">Skype</a> <br /> <br /> <input type="checkbox" data-bind="checked: enabled">enabled Answer 8:
我喜欢用另一种方法是使用禁用的“CSS”指令锚：
<a id="aQStreamSkype" data-bind="css: { disabled: $data.SkypeId == 'null' }">Skype</a>
文章来源: Disable anchor tag in knockout.js
