I have the following HTML:

<a title="Login" data-href="/MyAccount/Access/Login" 
   data-title="Admin" data-entity="n/a" 
   id="loginLink" class="nav-button dialogLink"><b>Login</b></a>

<a title="Register" 
   data-href="/MyAccount/Access/Register" 
   data-title="Admin" data-entity="n/a"
   id="registerLink" class="nav-button dialogLink"><b>Register</b></a>

When a user clicks on the #loginLink or #registerLink I would like to disable the link and call a dialog script. I created the following function:

$("#loginLink, #registerLink")
    .click(function () {
        $('#loginLink').prop('disabled', true);
        $('#registerLink').prop('disabled', true);
        dialog(this);
    });

It calls the dialog correctly but doesn't disable the links and if I click the buttons more than once it calls up more than one dialog box. Is there something I am doing wrong? I can't see why it would not work.