Toggling a class disables my link

Question

I have this jquery:

$(".button").toggle(function() {
$(this).find(".button").addClass('disable');    
},
function(){
$(this).find(".button").removeClass('disable');
});

My html for .button link is:

<a class="button" href="/users/sign_up">

My css disable class:

.disable {
          background: none repeat scroll 0 0 #F2F0F0 !important ;           
          border-color: #D1CDCD;
          color: #D1CDCD !important;    
          cursor:default;   
          text-shadow: 0 -1px rgba(34, 25,25,0.01)!important;                           
          cursor:pointer; box-shadow: none !important;
          }

Why I can not go to /users/sign_up when I click the button? The .disable class is added and working fine but the link isn't taken.

Answer 1

Found this in the jQuery documentation:

The implementation also calls .preventDefault() on the event, so links will not be followed and buttons will not be clicked if .toggle() has been called on the element.

It would be easy to open the page manually at the end of your toggle function:

window.location = $(".button").attr('href');

Here's an example in JSFiddle. To get it working, I had to replace $(this).find(".button") with $(".button).