How can I use a data attribute and jQuery to make a link clickable or not?

Question

I have two buttons on my page:

     <a class="button accessLink"
        id="loginLink"
        data-disabled="false"
        data-href="/MyAccount/Access/Login"
        title="Login">Login</a>

     <a class="button accessLink"
        id="registerLink"
        data-disabled="false"
        data-href="/MyAccount/Access/Register"
        title="Register">Register</a>

How can I use jQuery to make it so that if one of the buttons is clicked and if data-disabled is set to false then it:

• Sets the data-disabled of both to "true"
• Calls a function called dialog like this: dialog(this).

I also don't want the click to event to work.

Answer 1

$('a[data-disabled]').click(function(e) {
  if (!$(this).data('disabled')) {
    e.preventDefault();
    $(this).attr('data-disabled', 'true');
    dialog(this);
  }
});

Answer 2

This should work:

$("a.accessLink").click(function(e){
    e.preventDefault();    
    if($(this).data("disabled") == false) {
        $("a.accessLink").data("disabled", true);
        dialog(this);
    }
});​​