Disable hover with knockout condition

I have a button which looks like this:

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

I would like to disable with the same condition valid() === true. In essence I want to add pointer-events: none when my function is equal to true using knockout bindings.

Answers


Your title says "disable hover", but the question (slipstreamed from earlier PO comments) mentions wanting to add a pointer-events css value. I'll assume the latter to be the final instruction.

The most sane way to do so would be to have a class that is enabled/disabled, as per @SivanrajM's comment. For example:

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>

Need Your Help

Debugging MS SQL Stored Procedure

sql visual-studio tsql debugging stored-procedures

I have a problem getting Stored Procedure debugging to work in Visual Studio 2008: When I start debugging, I get these success messages in the output window, however the actual stored procedure win...

Force a button to open in a new window

java selenium-webdriver

I'm using Selenium Webdriver with Java and trying to force a click to open a new window. I can't use a contextClick because the option to open the link doesn't exist if I right-click the image but...