Disable <a href> in runtime using Javascript

Question

Using Bootstrap

  <ul class="nav nav-pills nav-stacked col-sm-2 hidden" id="menu">
                <li role="presentation" id="LiNewsFeed"><a href="javascript:GetNewsFeed();">News Feed</a></li>
                <li role="presentation" id="LiStatusUpdate"><a href="javascript:StatusUpdate();">Update Status</a></li>
                <li role="presentation" id="LiWriteWall"><a href="javascript:WriteOnWall();">Post On Wall</a></li> 
                <li role="presentation" id="LiNotifications"><a href="javascript:GetNotifications();">Notifications</a></li>
                <li role="presentation" id="LiLogOut"><a href="javascript:LogOut();">Logout</a></li> 
  </ul>

In Javascript, I am disabling some of the <li> like the following:

 $('#LiNewsFeed').addClass('disabled');

The Item in the List actually LOOKS disabled, when when I click on it, it actually calls the javascript function, therefore, what I need is to disable the <a href> not just the <li>

I tried adding this after $(document).ready:

$(".nav li.disabled a").click(function () {
                return false;
});

But it's not really doing anything.

What I need is to disable the <a href> directly after disabling <li> in my Js code, and not to depend on a click event...

Seems like there is no way to disable an <a href>, so I need a way around it

Any help would be appreciated.

use $(".nav li.disabled a").click(function(event){ event.preventDefault(); }); — Nishit Maheta
– Nishit Maheta, Commented Mar 11, 2015 at 10:51
@jQuery Thank you, but I want to disable the a object, and not depend on the click event, because it's getting mixed up within other events and not calling it right. — HelpASisterOut
– HelpASisterOut, Commented Mar 11, 2015 at 10:52
then you can unbind click event $(".nav li.disabled a").unbind('click') or in new version of jquery $(".nav li.disabled a").off('click') — Nishit Maheta
– Nishit Maheta, Commented Mar 11, 2015 at 10:54

Nishit Maheta · Accepted Answer · 2015-03-11 11:09:38Z

1

use below code. check working example JSFIDDLE

$(".nav li.disabled a").each(function(){
     $(this).attr('href','javascript:void(0);');
});

answered Mar 11, 2015 at 11:09

Nishit Maheta

6,0413 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HelpASisterOut Over a year ago

If I call this from te browser console it works, but not from the code

Nishit Maheta Over a year ago

did you check example?

Apul Gupta · Accepted Answer · 2015-03-11 11:13:55Z

1

As you are disabling LI in javascript (runtime), you should use .on to bind events on disabled links:

$(".nav").on('click', 'li.disabled a', function () {
    return false;
});

answered Mar 11, 2015 at 11:13

Apul Gupta

3,0344 gold badges24 silver badges30 bronze badges

Comments

Joe Fitter · Accepted Answer · 2015-03-11 11:34:18Z

1

I would check on every link click if the parent has the disabled class.

$('.nav li a').click(function () {
    if($(this).parent('li').hasClass('disabled')) {
        return false;
    }
    return true;
});

EDIT, following more info from OP I would suggest the following:

$('.nav li a').each(function() {
    var $this = $(this);

    // store reference of 'href' attr in case link is re-enabled
    $this.data('href', $this.attr('href'));

    if ($this.parent('li').hasClass('disabled')) {
        // remove href attribute disabling click
        $this.removeAttr('href');
    } else {
        // restore href
        $this.attr('href', this.data('href'));
    }
});

This code should be run after you add/remove the disabled class on li elements.

EDIT 2 - Rather than you calling functions from the href of <a> links, you could do something like the following:

var events = {
    '#LiNewsFeed': 'GetNewsFeed',
    '#LiStatusUpdate': 'StatusUpdate'
    '#LiWriteWall': 'WriteOnWall',
    '#LiNotifications': 'GetNotifications',
    '#LiLogOut': 'LogOut'
};

for (var selector in events) {
    if (events.hasOwnProperty(selector)) {
        try {
            $(selector).click(function () {
                // assuming function is global
                if (typeof window[events[selector]] === 'function') {
                    // call function
                    window[events[selector]]();
                }
                // this is needed if the a element still has a href attr
                return false;
            });
        } catch (e) {
            console.log('Invalid Selector');
        }
    }
}

This way you can control the calling of the function, and check whether it should be called without altering the element, perhaps stick an

if (!$(this).parent('li').hasClass('disabled')) {
    ...
}

around the function call.

edited Mar 11, 2015 at 11:34

answered Mar 11, 2015 at 10:53

Joe Fitter

1,3097 silver badges11 bronze badges

2 Comments

HelpASisterOut Over a year ago

But I am binding the action to the ahref inside the a href tag like the following <a href="javascript:GetNewsFeed();">. is there a way I can turn this into javascript:void() in runtime?

Joe Fitter Over a year ago

yeah, in that case you could do $(this).attr('href', 'javascript:void(0)'); or perhaps even remove it, $(this).removeAttr('href');

Simone Sanfratello · Accepted Answer · 2015-03-11 13:26:17Z

0

can you convert the a into span?

(code not tested)

$(".nav li.disabled a").replaceWith(function() { return "<span>" + this.innerHTML + "</span>"; });

edited Mar 11, 2015 at 13:26

answered Mar 11, 2015 at 11:39

Simone Sanfratello

1,6301 gold badge12 silver badges22 bronze badges

Collectives™ on Stack Overflow

Disable <a href> in runtime using Javascript

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related