单击时如何禁用链接？

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?

Answer 1

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

Answer 2

CSS:

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

Answer 3

use this code to disable using jquery

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

Answer 4

Try this:

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

Answer 5

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>

Answer 6

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

Answer 7

.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