Disable a button after 3 clicks

Question

I have a form, with a button called add rows. I would like to disable this button after user clicks on it thrice.

Please show us your HTML – Markus Hedlund Aug 24 '12 at 08:28 — Markus Hedlund, Aug 24 '12 at 08:28

score 4 · Accepted Answer · answered Aug 24 '12 at 08:29

4

You could set a click counter on the button, but seeing as it is called "add rows", I suppose you might be able to just count the number of rows, and determine if it should be disabled that way.

bool disabled = true;
$('#add-rows').prop('disabled', disabled);

Replace true with your favourite means of calculating the number of rows.

answered Aug 24 '12 at 08:29

David Hedlund

128,221
31
203
222

dont know propt, should be attr? – Jonathan de M. Aug 24 '12 at 08:32
I used part of your code `var $i = 1; $('body').on('click','#addrow',function(){ if ($i < 2) { /*functions to be executed*/ $i++; } else { $(this).prop('disabled', 1);$(this).remove(); } });` – Kuldeep Daftary Aug 24 '12 at 09:19

score 1 · Answer 2 · edited May 23 '17 at 11:51

1

From the top answer in google Triple Click Event:

$.event.special.tripleclick = {

    setup: function(data, namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.bind('click', jQuery.event.special.tripleclick.handler);
    },

    teardown: function(namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.unbind('click', jQuery.event.special.tripleclick.handler)
    },

    handler: function(event) {
        var elem = this, $elem = jQuery(elem), clicks = $elem.data('clicks') || 0;
        clicks += 1;
        if ( clicks === 3 ) {
            clicks = 0;

            // set event type to "tripleclick"
            event.type = "tripleclick";

            // let jQuery handle the triggering of "tripleclick" event handlers
            jQuery.event.handle.apply(this, arguments)  
        }
        $elem.data('clicks', clicks);
    }

};

Used like so:

$("#mybutton").bind("tripleclick", function() {
   $(this).attr("disabled", "disabled");
}

Note that you'll probably want to use on instead of bind, see What's the difference between `on` and `live` or `bind`?

edited May 23 '17 at 11:51

Community

1
1

answered Aug 24 '12 at 08:33

RYFN

2,939
1
29
40

all the other code in that page is needed as well, in order for `tripleclick`, which is a custom event, to work. – David Hedlund Aug 24 '12 at 08:35
absolutely, I thought it a bit long to copy verbatim, but I'll update the answer. – RYFN Aug 24 '12 at 08:36
That `tripleclick` code was a little disappointing: I was hoping it was like the next thing after a `doubleclick` in the sense of firing only when there are three clicks within a short space of time, but no. (Not that a "true" tripleclick would've helped for this question.) – nnnnnn Aug 24 '12 at 08:36
1

I like this answer, but I got the solution with lesser code. Thanks :) – Kuldeep Daftary Aug 24 '12 at 09:21

Disable a button after 3 clicks

2 Answers2