2

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>
  • 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 Jun 25 '12 at 21:05
  • Also see ahrens answer below - I believe this is needed in some browsers. – ClarkeyBoy Jun 25 '12 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 Jun 25 '12 at 21:08
  • @Rodolfo yes you are right, chack my answer for the thread on the discussion – sabithpocker Jun 25 '12 at 21:23

5 Answers5

4

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(); 
});
ahren
  • 16,803
  • 5
  • 50
  • 70
4

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

Community
  • 1
  • 1
sabithpocker
  • 15,274
  • 1
  • 42
  • 75
1

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;
});
MacMac
  • 34,294
  • 55
  • 151
  • 222
1

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();
});

Cliseru Gabriel
  • 52
  • 4
0

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"}}
>
pviola
  • 31
  • 4