How to disable Zurb Foundation button?

Question

I've created a link in HTML with Zurb Foundation's button class:

<a href="/time_track/check_out" class="large button disabled">Check-out</a>

Looks disabled, that's great. However, I can still click on it and it takes me to /time_track/check_out! I even tried adding disabled="disabled" as an attribute to the a tag, didn't help.

Do Zurb Foundation buttons support disabled buttons? The page referenced above says all you have to do is "add .disabled to any button and it will look and act disabled." However, even the sample disabled button they show is clickable!

Answer 1

Because of the propagation @Valency is correct that anchors do not support disabled="disabled" something along the lines of whats below will more than do the trick. However I wonder if maybe this should become default framework behavior.

$('.disabled').click(function(e){
  return false;
});

Answer 2

All adding the disabled class does is style a link to look like a disabled button. 'a' links don't support disabled="disabled".

Without javascript, you aren't able to stop that link from being pressed. Either convert it from an 'a' link to a button, or whip up a quick bit of javascript to stop it from going through when the disabled class is added.