How can I disable multiple links with jQuery?

Question

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.

score 1 · Answer 1 · answered Sep 09 '12 at 09:00

1

You have to use jQuery's on() and off() methods to bind/unbind events. Setting disabled property have no effects on links, click events will still be fired.

Here you can find a description and demo: http://api.jquery.com/off/

answered Sep 09 '12 at 09:00

keaukraine

5,315
29
54

If OP uses on / off (jQuery 1.7 or later required), bind / unbind or delegate / undelegate does not matter. OP does not have to use on/off but any off the methods will do as long as the event is unbound or prevented from propagating. – Nope Sep 09 '12 at 09:20

elclanrs · Accepted Answer · 2012-09-09T09:28:36.213

1

If you want to bind and unbind events at any time, store the code in a function, then you can use namespaced events to associate the event with that function.

function dlog(e) {
  e.preventDefault();
  dialog(this);
}

var $els = $("#loginLink, #registerLink");

$els.on('click.dlog', function(e){ dlog(e) }); // bind
$els.off('.dlog'); // unbind

Edit: Another option would be to use one() which attaches the event just once, then you can attach the event again when the dialog is closed.

$els
  .one(function(e) { dlog(e) })
  .dialog({
     beforeClose: function() { 
       $els.one(function(e) { dlog(e) });
     }
  });

edited Sep 09 '12 at 09:28

answered Sep 09 '12 at 09:13

elclanrs

92,861
21
134
171

@clclanrs - Is your syntax right. Sorry I just didn't see like this before. I am not sure I understand the function parameters you set up for bind and unbind. What do you mean with 'click.dlog' and '.dlog' ? – Samantha J T Star Sep 09 '12 at 09:17
Those are namespaced events. You can read more [here](http://api.jquery.com/on/). `dlog` is short for "dialog", you can use whatever you want as namespace. – elclanrs Sep 09 '12 at 09:19
Can you give an example. Sorry but I still can't understand what you mean with the function parameters after $els.on( and $els.off( but I understand how the dlog function works. Can you make it like the other suggestion. Thank you. SOrry I am asking a lot of questins – Samantha J T Star Sep 09 '12 at 09:22
I am sorry but I still do not understand the function parameters after $els.on( and $els.off( what does it mean with 'click.dlog' and '.dlog'. I realize your code is very concise but can you make it more verbose so I can follow it. You mention $.els.dialog but this doesn't exist in my application. dialog is a function I use to open a modal window for login. There's no beforeClose set up. Do I have to set one of those up also? – Samantha J T Star Sep 09 '12 at 09:38
I thought you were using jQuery UI for the dialog... For the confusing `click.dlog` syntax read about **namespaced events** in the jQuery Docs for `on()` – elclanrs Sep 09 '12 at 09:41

score 0 · Answer 3 · answered Sep 09 '12 at 08:59

0

You need to do it like this

$("#loginLink, #registerLink").click(function(e) {
    e.preventDefault();
    dialog(this);
});

answered Sep 09 '12 at 08:59

MichaelT

7,574
8
34
47

score 0 · Answer 4 · edited May 23 '17 at 10:24

0

$("#loginLink, #registerLink").on("click", function () {
 dialog(this);
 return false;
});

return false in jQuery will execute both, e.preventDefault and e.stopPropagation where second one will prevent event from bubbling up and that's what you are after.

additional info: event.preventDefault() vs. return false

edited May 23 '17 at 10:24

Community

1
1

answered Sep 09 '12 at 09:06

daniel.tosaba

2,503
9
36
47

How can I disable multiple links with jQuery?

4 Answers4