禁用具有淘汰条件的悬停

Disable hover with knockout condition

我有一个看起来像这样的按钮:

<button data-bind="enable: valid, css:{'btn-primary': valid() === true}">

我想在相同条件下禁用 valid() === true。本质上,当我的函数等于 true 使用敲除绑定时,我想添加 pointer-events: none

您的标题是 "disable hover",但问题(从之前的 PO 评论中提取)提到想要添加 pointer-events css 值。我假设后者是最后的指示。

根据@SivanrajM 的评论,最明智的做法是 class 即 enabled/disabled。例如:

ko.applyBindings({ valid: ko.observable(true) });

// For demo purposes:
document.querySelector("button").addEventListener("click", function() {
  alert("clicked!");
});
.btn-primary { text-transform: uppercase; }
.no-ptr-evts { pointer-events: none; color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

<button data-bind="enable: valid,
                   css: { 'btn-primary': valid,
                          'no-ptr-evts': valid }">
  (try to) click me
</button>
<hr>
<label><input type="checkbox" data-bind="checked: valid"> `valid`</label>

我不清楚您为什么要(根据您的问题)在 valid() === true 时禁用指针事件,但是嘿:这取决于您!

请注意,我已将 valid() === true 缩减为 valid,这是等效的。

顺便说一句,如果您想跳过创建单独的 class 并执行内联样式的 knockout-analogy,请使用 the style binding:

ko.applyBindings({ valid: ko.observable(true) });

// For demo purposes:
document.querySelector("button").addEventListener("click", function() {
  alert("clicked!");
});
.btn-primary { text-transform: uppercase; }
.no-ptr-evts { pointer-events: none; color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

<button data-bind="enable: valid,
                   css: { 'btn-primary': valid },
                   style: { 'pointer-events': valid() ? 'none' : 'auto' }">
  (try to) click me
</button>
<hr>
<label><input type="checkbox" data-bind="checked: valid"> `valid`</label>