How to simulate disabled button with custom button tag?

Question

jsbin link: http://jsbin.com/axevid/2 <- open using Webkit browser (Chrome or Safari)

When regular button is disabled, all events are disabled too. I created a custom tag (part of the requirement of the project) for a custom button. But how can I make it so that it disables binded events when the button is disabled and get them back once enabled?

I'm using Javascript MVC. I think I saw a function, which disables events, but I forgot where it was.

EDIT: The code should be kind of a plug-in, which should work on all custom buttons. In other words, I don't want to include if statement in each binded event. Any ideas? Thanks.

score 0 · Answer 1 · answered Mar 21 '12 at 19:23

0

When you create the control, you also need to add event listeners to it for the events you want to prevent ("click" and "keypress", probably). Then, in the handlers, call event. stopImmediatePropagation() if you want to prevent anyone else from seeing the event.

For example:

btn.addEventListener("click", function(event) {
    if (btn.disabled) {
        event.stopImmediatePropagation();
    }
});

answered Mar 21 '12 at 19:23

David Wolever

148,955
89
346
502

I've edited the question. I don't want to include if statement in each event listener, but more like to have a general code, which I can include in all files, and which cancels other events. – Sherzod Mar 21 '12 at 20:25

score 0 · Answer 2 · answered Mar 21 '12 at 19:23

0

This will work: http://jsbin.com/axevid/3

I made changes in the following part:

$(document).delegate('abutton', 'click', function(e){
  if($(this).attr('disabled')){
    e.preventDefault();
    return;
  }
  alert("Custom button");

});

answered Mar 21 '12 at 19:23

vivek

1,944
1
17
26

I've edited the question. I don't want to include if statement in each event listener, but more like to have a general code, which I can include in all files, and which cancels other events. – Sherzod Mar 21 '12 at 20:26

score 0 · Answer 3 · answered Mar 21 '12 at 19:25

0

Does you mean (as I understood from your request)

$(function() {
$("abutton").each(function() {
if($(this).attr("disabled")) {
e.preventDefault();
return;
});
});

answered Mar 21 '12 at 19:25

Snake Eyes

16,287
34
113
221

I've edited the question. I don't want to include if statement in each event listener, but more like to have a general code, which I can include in all files, and which cancels other events. – Sherzod Mar 21 '12 at 20:27

How to simulate disabled button with custom button tag?

3 Answers3