How can I make a disabled button do something when clicked? (JS)

Question

So I have this piece of code:

var delete_disabled = (parseInt(row.attr("data-state"), 10) === serverVars.obligationStateNotStarted) ? '' : 'disabled="disabled"';
        newHtml += "<button class=\"delete small\"" + delete_disabled + " title=\"" + labelDelete + "\"><i class=\"icon-trash\"></i></button>";

It checks if a certain criteria is met and if it is then it disables the button however once the button is disabled I would like something still to happen when I click on it? I've tried everything I can think of and was hoping for some suggestions. Thanks in advance :)

http://stackoverflow.com/questions/7833854/jquery-detect-click-on-disabled-submit-button This could help you. — TheFrozenOne, Dec 19 '13 at 16:03
Play with its layout to give the impression it's disabled, but instead of disabling it, just attach a different handler for the click event. — emerson.marini, Dec 19 '13 at 16:03
Don't disable it, make it look like it is disabled (from an user perspective, gray text and background, etc...) and handle its state with a variable or something. — Hanlet Escaño, Dec 19 '13 at 16:05
That's not disabling a button, that's destroying it by replacing/reparsing it's HTML to have a completly new and different button with a (not even standard) disabled keyboard. Use attribute `disabled="disabled"` — Virus721, Dec 19 '13 at 16:07
disable a button and pretend it still does something while disabled is a big "no no" IMHO. — BeNdErR, Dec 19 '13 at 16:09
Once you disable button no event is identified with respect to that button. you can deal with css to make it look like disable without using disabled attribute. — Airan, Dec 19 '13 at 16:20

melc · Accepted Answer · 2013-12-19T16:34:18.013

Alternatively to actually firing an event when clicking the disabled button, you can add a dummy element in front of a disabled button and add a listener, associated with the disabled state, on that element. For example,

http://jsfiddle.net/FN45M/

js

$(document).ready(function () {
/*this click listener could also be added as part of the disableButton function.*/
    $(document).on('click', '.click-div', function () {
        console.log('clicked');
        alert('clicked');
    });

    disableButton($('button'));
    //enableButton($('button'));

});

function disableButton($el){
    var wrapper = $el.wrap("<div class='wrapper'>").parent();
    wrapper.css({"display":"inline","position":"relative"});
    var divClick = $("<div class='click-div'>");
    divClick.css({"position":"absolute",
                  "top":0,
                  "height":"100%",
                  "width":"100%"
                 });
    wrapper.append(divClick);

    /*divClick.on('click', function () {
        console.log('clicked');
        alert('clicked');
    });*/
}

function enableButton($el){
    $el.next(".click-div").remove();
    $el.unwrap("<div class='wrapper'>");
    $el.prop("disabled",false);
}

html

<button disabled>test</button>

score 1 · Answer 2 · answered Dec 19 '13 at 17:12

Use following code

JQuery:

$("button#disabled, button#enabled").click(function(){
    if($(this).attr('id') === 'disabled'){
        alert('disabled');
        // do your suff here for disabled button
    } else {
        alert('enabled');
        // do your suff here for enabled button
    }
});

HTML:

<button id="disabled" style="color: graytext;"><i>disabled</button>
<button id="enabled">enabled</button>

Example here

How can I make a disabled button do something when clicked? (JS)

2 Answers2