Quick Note: ng-disabled And Anchor Tags Oh Noes!

by Lukas Ruebbelke | Aug 28, 2012 | AngularJS, JavaScript, Quick Note | 25 comments

So this is a quick, not too serious post about a problem I ran into a couple days ago that I think is worth writing down.

I am a huge fan of Twitter Bootstrap as I think it gives you so much to work with right out of the gates. I hit a snag a couple days ago when I was trying to apply ng-disabled to an anchor tag.

In Twitter Bootstrap it is super easy to apply their .btn class to just about anything. Their docs give me permission so why wouldn’t I!?

Button styles can be applied to anything with the .btn class applied. However, typically you’ll want to apply these to only <a> and <button> elements for the best rendering.

So when I applied ng-disabled=”true” to my freshly minted button it would fade out but I was still able to click through. Ummmmm… what the deal?

So here is the story on why this happens. Form controls have a disabled property on them but anchor tags do not. Therefore, ng-disabled has nothing to actually pin itself on.

So the fix is super easy once I figured out what was going on.

This

<a class="btn btn-primary" ng-disabled="checked" ng-click="handleClick()">ANCHOR</a>

became this

<button class="btn btn-primary" ng-disabled="checked" ng-click="handleClick()">BUTTON</button>

And bam! Disaster averted. And by ‘disaster averted’ I mean I got this fixed before QA busted me.

Here is a more comprehensive fiddle illustrating my experience.

http://jsfiddle.net/simpulton/q8r4e/

25 Comments

Mario J. Barchein on September 18, 2012 at 1:53 pm

I hit this same issue some weeks ago and it made me spend two hours figuring why it didn’t work.
simpulton on September 18, 2012 at 3:52 pm

So am I am NOT the only one! 😀
Peter Davis on January 4, 2013 at 7:07 pm

I know you already know about this, but I just wanted to post the link to the AngularJS issues for people who find this page.
https://github.com/angular/angular.js/issues/1651
https://github.com/angular/angular.js/issues/1674
https://github.com/angular/angular.js/issues/1662
James on June 20, 2013 at 2:45 pm

Good lookin’ out homey! I was about ready to kill a rock trying to figure out why ng-click was still firing when ng-disabled was set to true!
Alexandra on July 17, 2013 at 11:26 am

Waw! Exactly what I needed!
Olaf on September 17, 2013 at 7:32 am

Thanks. Just what I was looking for (after wasting 10 min debugging in a completely wrong place).
Bailey on February 21, 2014 at 3:42 am

Thanks!
Roy on April 2, 2014 at 7:28 pm

To move from an anchor tag to a button wouldn’t you have to write a function to change views rather than relying on Angular’s built in routing?

Is that frowned upon?
simpulton on April 2, 2014 at 7:42 pm

This case came up because I was actually using an anchor tag as a button in a form since Bootstrap makes those controls interchangeable.

If I actually needed anchor tag functionality, I would approach the problem a little different. More than likely I would show or hide the anchor tag instead of trying to disable it.
MoonStorm on April 30, 2014 at 9:07 am

You’re an idiot.

Give proper solutions not workarounds! There are elements, CSS, logic, etc that rely on links being used, not buttons.
simpulton on April 30, 2014 at 1:28 pm

First of all – I think you’re rhetoric is indicative of a total lack of manners which is a larger problem than the scope of my blogpost.

Secondly, I think you are a smart individual that can discern the cases where a button is not an appropriate solution.

Thirdly, this is the ‘workaround’ that was pointed out to me by Igor after talking it over with him. I am more than happy to let him know that he is an idiot on your behalf if you would like as well.
Andrew on August 26, 2014 at 9:13 pm

So I’m running into this issue as well. However, my anchor tags are within a dropdown menu inside of elements. I’d prefer to keep them as a link and not a button. Any ideas?
simpulton on August 27, 2014 at 4:54 am

Sure you could do it with a directive and swallow the event or if you want to live life on the edge… with css and pointer-events: none; Hope that helps!
Harsh on September 20, 2014 at 10:39 am

Ha ha ha.
Thanks pal. Your post saved me too from getting busted.
Nice trick !
Sami on February 17, 2015 at 10:39 pm

I also encountered the same problem… I applied a CSS class to the anchor tag
data-ng-class=”{disabled: !canCreate}”

that anchor tag will be disabled if canCreate is false from the controller!
bob on March 30, 2015 at 7:26 pm

This is a dumb hack, now your anchor looks like a button…
simpulton on March 30, 2015 at 7:30 pm

From the Bootstrap docs…

Use the button classes on an a, button, or input element.
Justin on April 9, 2015 at 5:40 am

I want to keep my anchor tag in disable state and do not want to make it as button…. Given fiddle link is showing that ng-disabled does not work with anchor tag.
So any idea?
Rhys Patterson on May 5, 2015 at 12:38 am

An suitable alternative I have found to retain the anchor element type (if you require an A tag, or are using href/ng-href) is to include the same logic as ng-disabled in a ng-click to conditionally prevent the default click action, as follows: Link text here
Walter on August 28, 2015 at 5:13 pm

With ng-click, you could also change it to ng-click=”checked || handleClick()”. If it is ng-href, you could do ng-ref=”{{checked ? ” : ‘your URL’}}”.
darryl on October 7, 2015 at 8:23 pm

Thanks!
adam on October 19, 2015 at 3:34 pm

disabled attributes don’t apply to anchors, only to buttons. Interestingly the disabled class is obeyed by ng-click in angular 1.3
http://plnkr.co/edit/lDEUKcqVZ663BRgYFr2C?p=preview
Phil on November 23, 2015 at 2:45 pm

Thats all very well, but what you have now is a button and not an anchor. They dont look at all the same.
There should be a way to make it still look like an anchor. I guess it could be done in styling, so that the border is removed
Bruce McCoder on February 25, 2016 at 4:44 pm

This is a winning post!
Rich on March 16, 2016 at 1:36 pm

If for whatever reason you do need to keep as an anchor rather than button, could you do this..

ANCHOR

In the “or”, the “checked” is evaluated first and if true evaluation stops so the function is never called.