Disable div with click event

Question

I want to disable my div with image and click event that event does not call. I try do it with KO:

<div title="Delete Series" class="deleteSeriesButton" data-bind="css: { disabled: true}" ></div>

but this does not work with div.

Can I do it without unbind click event?

Answer 1

If you are using KnockoutJS, then you have a view model. And if you have a view model, you should be able to add an observable property that tells you whether the "delete series" button is enabled or disabled.

self.isDeleteEnabled = ko.computed(function() {
    // your code that tells whether the button is enabled or not
});

And let's say you in your view model the click action, like this:

self.clickAction = function() { 
    // do what you want to do 
}

Thne, you can make your "click" binding dependent on this observable, like this:

<div class="button" data-bind="click: isDeleteEnabled() ? clickAction : null">

If the isDeleteEnabled observable returns true, then the button is clickable, otherwise it's not.

I made a fiddle so you can see how it's done in a real example.

Answer 2

you can block the div using the jQuery blockUI plugin.

link to blockUI