how to disable link when its clicked?

Question

i want to disable link when i clicked on a link,here is my code:

<a href="?cmd=7" style="color:#00F; margin-left:15px; text-decoration:underline">Past 7 Days</a>
<a href="?cmd=14" style="color:#00F; margin-left:15px; text-decoration:underline">Past 14 Days</a>
<a href="?cmd=30" style="color:#00F; margin-left:15px; text-decoration:underline">Past 30 Days</a>
<a href="?cmd=custom" style="color:#00F; margin-left:15px; text-decoration:underline">Set A Custom Date Range</a>

i want when i click past 7 days link this link is disabled or ther links enabled,as soon then if i clicked on past 14 days link,past 7 day link is enabled and past 14 days link is disabled.how i do this?

Am I the only one around here who thinks you want to achieve the effect across page loads? — Tobias, Jan 30 '14 at 10:59

score 3 · Accepted Answer · answered Jan 30 '14 at 10:54

3

$('a').on('click',function(){
   $('a').removeAttr('disabled');
   $(this).attr('disabled',true);
})

or

.disable
{
 pointer-events: none;
 cursor: default;
}

$('a').on('click',function(){
    $('a').removeClass('disable');
    $(this).addClass('disable');
})

answered Jan 30 '14 at 10:54

Prashobh

9,216
15
61
91

I think the OP wants to achieve the effect across page loads. – Tobias Jan 30 '14 at 11:00
it may be because of your jquery is loaded before you run your code , or jquery conflict – Prashobh Jan 30 '14 at 11:40
http://stackoverflow.com/questions/14203125/typeerror-is-null-error-in-firebug-but-code-works-on-jsfiddle – Prashobh Jan 30 '14 at 11:41
i remove TypeError: $(...) is null but my link not disable i want my link is disabled its color and underline remove – Muhammad Arif Jan 30 '14 at 11:52
$(this).css('color','red') ,you can add or remove what ever you need – Prashobh Jan 30 '14 at 12:04

score 1 · Answer 2 · answered Jan 30 '14 at 10:55

1

CSS:

a:visited
{
 pointer-events: none;
 cursor: default;
}

answered Jan 30 '14 at 10:55

Dieter B

1,142
11
20

From [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:visited): "The :visited CSS pseudo-class lets you select only links that have been visited." That's not what the OP wants. – Tobias Jan 30 '14 at 10:56

score 0 · Answer 3 · answered Jan 30 '14 at 10:53

0

use this code to disable using jquery

$("a").on('click',function(){
$(this).attr('disabled',true);
})

answered Jan 30 '14 at 10:53

Karthick Kumar

2,349
1
17
30

1. `disabled` should not be used for ``. 2. This does not answer the question. – Tobias Jan 30 '14 at 10:54

score 0 · Answer 4 · answered Jan 30 '14 at 10:56

0

Try this:

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

answered Jan 30 '14 at 10:56

Linga

10,379
10
52
104

score 0 · Answer 5 · answered Jan 30 '14 at 11:00

Since my reputation doesn't let me comment yet, I'll post is as an answer here. This is intended to improove Karthick Kumar Ganesh's answer.

Depending on what jq-version you are using, you should use .prop() instead of .attr() for setting attributes / propperties.

Also I would use a class on your links if you're not just addressing anchors or adding get parameters, that should be disabled so that not all links are disabled after clicking.

$("a.disabable").on('click',function(){
  $(this).prop('disabled',true);
})

Lastly it makes perfect sense to add a target="_blank" or something similar to your links, so that your link opens in a new tab. Otherwise it makes no sense to me to disable a link, after it has been clicked.

An example link would look something like this

<a href="wher/you/want/to/go" class="disabable" target="blank" style="[...]">Foo</a>

score 0 · Answer 6 · edited May 23 '17 at 11:56

0

This is the only solution so far that works across page loads as the OP described (I assume clicks on the anchors change the document location and therefore reload the page).

HTML (added class attributes):

<a class="cmd-7" href="?cmd=7" style="color:#00F; margin-left:15px; text-decoration:underline">Past 7 Days</a>
<a class="cmd-14" href="?cmd=14" style="color:#00F; margin-left:15px; text-decoration:underline">Past 14 Days</a>
<a class="cmd-30" href="?cmd=30" style="color:#00F; margin-left:15px; text-decoration:underline">Past 30 Days</a>
<a class="cmd-custom" href="?cmd=custom" style="color:#00F; margin-left:15px; text-decoration:underline">Set A Custom Date Range</a>

JavaScript (using the code from this answer):

$(function() {
  // Get the cmd query parameter
  var cmd = getParameterByName('cmd');
  if(cmd) {
    // Disable the link
    $('a.cmd-' + cmd).click(function(event) {
      event.preventDefault();
    })
    // Add a class to allow styling
    .addClass('disabled');
  }
});

edited May 23 '17 at 11:56

Community

1
1

answered Jan 30 '14 at 11:05

Tobias

7,723
1
27
44

when i used your code it gives error ReferenceError: getParameterByName is not defined – Muhammad Arif Jan 30 '14 at 12:16
@Arif I wrote "using the code from [this answer](http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript/901144#901144)". So you should include the function declared in the referenced answer. – Tobias Jan 30 '14 at 13:06
i used your function but link not disabled – Muhammad Arif Jan 30 '14 at 13:12
how i disable link when it is clicked – Muhammad Arif Jan 30 '14 at 13:38
@Arif `event.preventDefault();` should have disabled the link. What does `getParameterByName('cmd')` return? You could also use CSS to disable the link: `a.disabled { pointer-events: none; cursor: default; }` (based on [this answer](http://stackoverflow.com/a/4416239/2948765)). – Tobias Feb 11 '14 at 15:53

score 0 · Answer 7 · answered Jan 30 '14 at 11:14

.disabled {
text-decoration:none;
color:black;
 }


<a class="links" href="##"> Link1 </a></br>
<a class="links" href="##"> Link2 </a></br>
<a class="links" href="##"> link3 </a></br>


$(function(){
   $(".links").click(function(){
    if($(this).hasClass("disabled")){
         return false;
    }
    else{
        $(".links").removeClass("disabled");
        $(this).addClass("disabled");
    }
});
})

I think It will work

how to disable link when its clicked?

7 Answers7