jquery - disable click

Question

I just want to disable the ability for a user to click on an element for some condition. Here is some of the code I am working with:

     $('#navigation a').bind('click',function(e){

    var $this   = $(this);
    var prev    = current;

    current = $this.parent().index() + 1; // store the position in current

    if (current == 1){
    $("#navigation a:eq(1)").unbind("click"); // i want to disable the ability to click this element if current is 1
    }
    if (current >= 2){
    $("#navigation a:eq(1)").bind("click"); // this is wrong, but I want to rebind the click if current is greater than 1.  
    }

}

`$('selector').prop("disabled", true);` – vishalknishad Feb 22 '19 at 04:44 — vishalknishad, Feb 22 '19 at 04:44

zzzzBov · Accepted Answer · 2012-08-02T19:07:00.653

104

If you're using jQuery versions 1.4.3+:

$('selector').click(false);

If not:

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

edited Aug 02 '12 at 19:07

answered Jan 04 '11 at 01:38

zzzzBov

174,988
54
320
367

27

Is there a way to toggle disabling the click function instead of redefining it? – Gaʀʀʏ Mar 10 '15 at 22:35

ehudokai · Answer 2 · 2011-01-04T06:45:04.590

27

assuming your using click events, just unbind that one.

example

if (current = 1){ 
    $('li:eq(2)').unbind("click");
}

EDIT: Are you currently binding a click event to your list somewhere? Based on your comment above, I'm wondering if this is really what you're doing? How are you enabling the click? Is it just an anchor(<a> tag) ? A little more explicit information will help us answer your question.

UPDATE:

Did some playing around with the :eq() operator. http://jsfiddle.net/ehudokai/VRGfS/5/

As I should have expected it is a 0 based index operator. So if you want to turn of the second element in your selection, where your selection is

$("#navigation a")

you would simply add :eq(1) (the second index) and then .unbind("click") So:

if(current == 1){
    $("#navigation a:eq(1)").unbind("click");
}

Ought to do the trick.

Hope this helps!

edited Jan 04 '11 at 06:45

answered Jan 04 '11 at 01:39

ehudokai

1,928
12
9

im binding the click in a manner like this: $('#navigation a').bind('click',function(e){ so i am using the tag. – scifirocket Jan 04 '11 at 06:21
Oh, ok, that helps a lot. It's really just as simple as adding the a onto the selector I think. So: $('#navigation li:eq(2) a').unbind('click'); – ehudokai Jan 04 '11 at 06:27
@scifirocket: Of course I was wrong, but if you see my update above, I tested this answer :). – ehudokai Jan 04 '11 at 06:45
so now that I have unbinded the click if current = 1, how can I rebind the click otherwise. I know it's not as simple as $("#navigation a:eq(1)").bind("click"); – scifirocket Jan 04 '11 at 22:59
to rebind do `$("#navigation a:eq(1)").bind("click", function(){//yourcode});` – ehudokai Jan 22 '11 at 05:49

Ben · Answer 3 · 2011-01-04T02:20:45.637

10

Raw Javascript can accomplish the same thing pretty quickly also:

document.getElementById("myElement").onclick = function() { return false; }

edited Jan 04 '11 at 02:20

answered Jan 04 '11 at 01:44

Ben

54,723
49
178
224

2

I assumed that it was a typo, so I added the "#" to the jQuery selector ;) – David Tang Jan 04 '11 at 02:18
Although... the `.onclick` won't work on a jQuery object either. You need `[0]` or `.get(0)`. – David Tang Jan 04 '11 at 02:19

score 6 · Answer 4 · answered Jan 04 '11 at 01:44

6

You can use unbind method to remove handler that has been attached...

if (current = 1){ 
   $('li:eq(2)').unbind('click');
}

You can check what can unbind do ? Unbind manual

answered Jan 04 '11 at 01:44

Joko Wandiro

1,957
1
18
28

actually, I probably needed to use something like this" $('#navigation li:eq(2)').unbind('click'); but that isn't working either. im trying to disable the click event to a particular element of a list. – scifirocket Jan 04 '11 at 04:18
@scifirocket: are you binding a click event somewhere in your code? Or are you just using an anchor that you want to disable? – ehudokai Jan 04 '11 at 06:04

score 2 · Answer 5 · edited Dec 20 '18 at 16:00

2

Use off() method after click event is triggered to disable element for the further click.

$('#clickElement').off('click');

edited Dec 20 '18 at 16:00

smonff

3,399
3
36
46

answered Nov 26 '18 at 09:17

Sajitha Rathnayake

1,688
3
26
47

score 0 · Answer 6 · edited Apr 16 '20 at 09:17

0

/** eworkyou **//

$('#navigation a').bind('click',function(e){

    var $this   = $(this);
    var prev    = current;

    current = $this.parent().index() + 1; //

    if (current == 1){
    $("#navigation a:eq(1)").unbind("click"); // 
    }
    if (current >= 2){
    $("#navigation a:eq(1)").bind("click"); // 
    }

edited Apr 16 '20 at 09:17

David Buck

3,752
35
31
35

answered Apr 16 '20 at 08:20

E Work You

1
1

score 0 · Answer 7 · edited Sep 22 '20 at 14:24

0

I used .prop('disabled', true) and it worked like a charm, no redefining, simple.

Had to time it out by 125ms as it interfered with the prop from Bootstrap Dropdown.

edited Sep 22 '20 at 14:24

Dharman

30,962
25
85
135

answered Sep 22 '20 at 14:18

Justin

1

jquery - disable click

7 Answers7

Linked

Related