How to disable HTML links

Question

I have a link button inside a which I have to disable. This works on IE but not working in Firefox and Chrome. Structure is - Link inside a <

Answer 1

I've ended up with the solution below, which can work with either an attribute, , or a class :

CSS Styles:

a[disabled=disabled], a.disabled {
    color: gray;
    cursor: default;
}

a[disabled=disabled]:hover, a.disabled:hover {
    text-decoration: none;
}

Javascript (in jQuery ready):

$("a[disabled], a.disabled").on("click", function(e){

    var $this = $(this);
    if ($this.is("[disabled=disabled]") || $this.hasClass("disabled"))
        e.preventDefault();
})