Question

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

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

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

Answer 1

您的标题显示“禁用悬停”，但问题（从之前的PO评论中翻译）提到想要添加pointer-events css值。我假设后者是最后的指示。

根据@ SivanrajM的评论，最明智的方法是启用/禁用一个类。例如：

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，这相当于。{/ p>

顺便说一下，如果你想跳过创建一个单独的类并进行内联样式的淘汰 - 类比，请使用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>

禁用具有淘汰条件的悬停

1 个答案: