disabling a tag with input type=button

Question

So, I have an tag that looks like:

<a id="createBtn" class="btn" title="" type="button">
<b>+</b>
Create New
</a>

Sometimes, we want it active, sometimes not. I've tried multiple ways to disable it, adding the disabled class, adding the property disabled, attempting to remove the type attribute (which I learned you cannot do), binding it to a function that prevents the default behavior, and using jquery's .bind('click', false) , but nothing seems to work.

I was wondering what js or jquery things I can to do this tag in order to disable it. It gets grayed out like it's disabled, but it still has the action tied to it which is a backbone

Here's some, not all of the things that I tried:

            this.$('#createBtn').addClass('disabled');
            this.$('#createBtn').attr('type', 'button');
            this.$('#createBtn').bind('click', false);


        } else {
            this.$('#createBtn').removeAttr('type');
            this.$('#createBtn').removeClass('disabled');

The #createBtn is tied to an event that updates the UI that is created in the initialize method of this backbone view.

"click #createBtn": "renderNewTemplate",

Answer 1

This is how I go about disabling anchor tags ( <a> ):

Disable the tag by removing its href attribute, and decreasing its opacity for an added effect:

$(document).ready(function(){
    $("#createBtn").click(function () { 
        $(this).fadeTo("fast", .5).removeAttr("href"); 
    });
});

And enabling the anchor:

$(document).ready(function(){
    $("#createBtn").click(function () { 
        $(this).fadeIn("fast").attr("href", "original href here"); 
    });
});

Original answer can be found here - I'm just recycling it as I use this in all of my projects that requires a disabling of an anchor tag

How to enable or disable an anchor using jQuery?