How to change an element to be unclickable after clicking it once using Jquery or Javascript

Question

The code is:

<a href="#" style="color:black" onClick="Record($id)">Done</a>  

I want this part becomes unclickable once if it is clicked, how to achieve this using Jquery or Javascript?

Answer 1

Provide the anchor tag an id and remove the onclick handler from the HTML markup.

<a id="anch1" href="#" style="color:black">Done</a>  

$(function(){
    $("#anch1").bind("click",function(){
        // do your action here
        $(this).unbind("click"); //unbinds the click event
    });
});

Answer 2

Use the .one() method which does exactly that ..

$(document).ready(function(){

   $('#anch1').one('click', function() {
      Record(/* your parameter */);
    });

});