I am having difficulties in disabling href links through jquery. I am using this method I modified. Can some please advise or help me in figuring this out? Thank you.

jquery/js

<script>
 $('.next-tab').click(function() {
     $('.st_tab_active').attr('disabled','disabled');
     var tab=  $('.st_tab_active').parent().next().children('a');
     tab.removeAttr('disabled');
     tab.trigger('click');
     return false;
      });
</script>

html

<ul class="st_tabs">
    <li><a href="#st_content_1" class="st_tab" disabled="disabled">Horizontal Tab #1</a></li>
    <li><a href="#st_content_2" class="st_tab" disabled="disabled">Horizontal Tab #2</a></li>
    <li><a href="#st_content_3" class="st_tab" disabled="disabled">Horizontal Tab #3</a></li>
    <li><a href="#st_content_4" class="st_tab" disabled="disabled">Horizontal Tab #4</a></li>
    <li><a href="#st_content_5" class="st_tab" disabled="disabled">Horizontal Tab #5</a></li>
</ul>

I am having difficulties in disabling href links through jquery. I am using this method I modified. Can some please advise or help me in figuring this out? Thank you.

jquery/js

<script>
 $('.next-tab').click(function() {
     $('.st_tab_active').attr('disabled','disabled');
     var tab=  $('.st_tab_active').parent().next().children('a');
     tab.removeAttr('disabled');
     tab.trigger('click');
     return false;
      });
</script>

html

<ul class="st_tabs">
    <li><a href="#st_content_1" class="st_tab" disabled="disabled">Horizontal Tab #1</a></li>
    <li><a href="#st_content_2" class="st_tab" disabled="disabled">Horizontal Tab #2</a></li>
    <li><a href="#st_content_3" class="st_tab" disabled="disabled">Horizontal Tab #3</a></li>
    <li><a href="#st_content_4" class="st_tab" disabled="disabled">Horizontal Tab #4</a></li>
    <li><a href="#st_content_5" class="st_tab" disabled="disabled">Horizontal Tab #5</a></li>
</ul>

• javascript
• jquery

• You have no }); at the end of the click function. Was this a mistake in copying or a mistake in the original code? If the latter I'll post it as an answer. – ClarkeyBoy Commented Jun 25, 2012 at 21:05
• Also see ahrens answer below - I believe this is needed in some browsers. – ClarkeyBoy Commented Jun 25, 2012 at 21:07
• also, I believe the attribute 'disabled' is only defined for input fields FYI, some browsers may display other elements with the attribute like 'greyed out' but this is probably not cross-browser – Rodolfo Commented Jun 25, 2012 at 21:08
• @Rodolfo yes you are right, chack my answer for the thread on the discussion – sabithpocker Commented Jun 25, 2012 at 21:23

5 Answers 5

You can use preventDefault(); to disable the default behaviour of links (which is, to navigate to the given href).

$("a").click(function(e){
    e.preventDefault(); 
});

All the answers looks like probable solutions

Here is a discusiion on use of disabled property on anchor tags

Should the HTML Anchor Tag Honor the Disabled Attribute?

Better, dont use disabled attribute, its kind of illegal ;)

Now you have

event.preventDefault();

or

return false;

Here is a discussion on the use of both,

event.preventDefault() vs. return false

for your case it looks like return false is good as you dont want bubbling as well.

A solution to your exact problem cannot be said as you havent explained the sitation well,

Looks like you are trying to switch tabs with certain enable/disable tabs when some "next tab" is clicked. If you can explain that also, we will be happy to help

There are two methods you could use, either prevent the default action or a simple return false.

$('a').click(function(event)
{
    event.preventDefault(); 

    // Rest of the code

    return false;
});

as ahren previously stated that is the way to go, however in order to not disable every href on your site use:
$('a.st_tab').click(function(e){
e.preventDefault();
});

Using the 'a' tag, the simplest way I found using JavaScript was to:

1. Add a condition to href (to actually inactivate the link) using an arrow function returning 'false'; and

2. Add the same condition to 'style' (to remove the 'a' tag standard formatting);

Full code below:

<a href={(my_condition)? "my_url_here" : () => {return false}} 
   style={(my_condition)? {cursor: "pointer"} : {cursor: "auto", color: "#000"}}
>