與淘汰賽條件

Question

禁用懸停我有一個按鈕，看起來像這樣：

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

我想禁用與相同條件valid() === true。實質上，我想添加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，這相當於。

順便說一句，如果你想跳過創建一個單獨的班級，做的內嵌樣式淘汰賽類比，用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>