Custom Handling of a href Tag in jQuery

Introduction

 

Hi all. Today I came across a situation of disabling and enabling a href tag programmatically. The property enable and disable is applicable for the input elements. So what must we do?

Using the code

Let us say I have an a tag as follows:

<a href="#" id="btnCreate"></a>

Now what we will do is just add an attribute and set the value as follows.

if (data.length > 1000)
{
   $('#btnCreateWidget').attr('disabled', true);
}

Here (data.length > 1000 ) is my condition. You can provide your own condition there. Now what do we need to think? What if the condition fails? We then must remove the attribute, right?

else
{
   $('#btnCreateWidget').removeAttr('disabled');
}

Now the remaining part is handling this in the click event. Are you ready?

Please see the following code.

$("#btnCreate").click(function (e)
{
    if ($(this).attr('disabled') != undefined)
{
        return ($(this).attr('disabled')) ? false : true;
}
    else
{
    //else condition codes here
}
}

What we are doing in the preceding code is we are checking whether the attribute we added is undefined or not first. Then if the attribute value is disabled, we are returning false. In the else part we can write the necessary code.

Conclusion

I hope you liked this article. Please provide your valuable suggestions.

Kindest Regards,

Sibeesh venu www.sibeeshpassion.com