how to disabled a button when press three times

Question

Hi I just wanted to ask if there is a possible way when the word edit was press three times, the edit will be disable. on the image I have attach is a multivendor page, vendors can edit there products, what I wanted to achieve is when the edit was press 3x, the edit will be disabled. and ofcourse the edit button will be disabled only on product01, the product02 edit word won't be affected.

I found the edit code in php here it is:

<span class="edit"><a href="<?php echo dokan_edit_product_url( $post->ID ); ?>"><?php _e( 'Edit', 'dokan' ); ?></a> | </span>

can anyone help me? Thankyou

Answer 1

Use Javascript, on the click event write in a new variable and count the click. If is equal with 3, then add the attribute to the button, that people can't use this.

As simple example with the help of jQuery. I think jQuery is much better, is always active in the back end of WordPress. Copy the script, change the selector to your ID or class, that you identify the right input field, in a script and load it via hook, like load-{$page_hook} only on the page, there you will use this script.

jQuery( document ).ready( function( $ ) {

    var counter = 1,
        element = 'input.edit';

    $( element ).click( function(e) {
        counter ++;
        // for control debugging in console
        console.log( counter );
        if ( counter > 3 ) {
            $( element ).attr( 'disabled', true );
        }
    } )

} );

• See the script as working example: http://jsfiddle.net/5b1w89ev/
• Alternative you can check a demo inside the SE Sandbox: https://meta.stackoverflow.com/questions/269754/stack-snippets-sandbox-try-it-out-here/299351#299351