Anchor tag disable

Question

I have to enable and disable the anchors based on index ,eg : when index is 3 or more &gt anchor should be disabled . I have written the following code snipet but the anchor is not getting disabled when index is 3 .

if(index == 3){
     $("#anchor2").click(function(e){
                e.preventDefault(); 
                return false;
        });
 }

post all of your relevant html and javascript. the above doesnt really help in understanding locating the issue — Banana, Dec 25 '14 at 18:54
by 'index', you mean the anchor's index? or is this a variable? — Banana, Dec 25 '14 at 19:02

Tushar · Answer 1 · 2014-12-25T19:02:00.463

2

You can just modify the scenario as:

    index=3;//change the value andcheck the result
    $('#anchor2').click(function (e) {
        if (index == 3) {
            e.preventDefault();
            return false;
        } else {
            alert('I am Enabled Now');
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="anchor2" href="#">Click me!</a>

edited Dec 25 '14 at 19:02

answered Dec 25 '14 at 18:59

Tushar

11,306
1
21
41

You don't need to prevent default if you are returning false – Tom Sarduy Dec 25 '14 at 19:09
yes I know that but this is the best practice per say :) – Tushar Dec 25 '14 at 19:10
*return false from within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation on the passed jQuery.Event object.* – Tom Sarduy Dec 25 '14 at 19:12

Tom Sarduy · Accepted Answer · 2014-12-25T19:24:27.737

1

$('#anchor2').click(function (e) {
    if (index >= 3) {
        e.preventDefault();
    }
    //if index<3 follow the link normally
});

edited Dec 25 '14 at 19:24

answered Dec 25 '14 at 19:08

Tom Sarduy

16,482
8
64
83

score 1 · Answer 3 · answered Dec 25 '14 at 19:44

1

try this trick:

<a href="#" data-disabled >Click Here! disabled</a>

$('a[data-disabled]').click(function (e) {
    e.preventDefault();
    console.log('disabled');
});

just put a data-disabled attribute on your 3rd anchor tag.

jsfiddle Demo

answered Dec 25 '14 at 19:44

Mohamad Shiralizadeh

7,153
5
52
78

score 1 · Answer 4 · answered Apr 01 '16 at 06:48

1

You can do this css trick:

if(index == 3){
    $("#anchor2").css('pointer-events', 'none');
}

answered Apr 01 '16 at 06:48

Nabscalyx

21
4

score 0 · Answer 5 · edited Aug 03 '17 at 13:53

0

Try this:

<a href='javascript:void(0);'>some text</a>

edited Aug 03 '17 at 13:53

Bugs

4,356
9
30
39

answered Aug 03 '17 at 10:40

Shiv Kumar Sah

1,014
1
13
16

Anchor tag disable

5 Answers5