CODEWITHSUNDEEP
jquery
personaelit
personaelit

Reputation: 1653

Make a link unclickable once it has been clicked - jquery

I am trying to make a link unclickable once it is clicked, then clickable once another link is clicked. Basically just a toggle but I need to make the active link unclickable to prevent the toggle. Here is my code:

$(document).ready(function(){
       $("#Espanol").hide();
       $("#espLink").addClass("nonSelected");           
       // Make english link unclickable
       $("#espLink").click(function(){
           $("#engLink").addClass("nonSelected");
           $("#espLink").removeClass("nonSelected");
           $("#English").toggle(); 
           $("#Espanol").toggle();    
           // need to make espanol link unclickable  
           // and english link clickable             
       });

       $("#engLink").click(function(){
           $("#espLink").addClass("nonSelected");
           $("#engLink").removeClass("nonSelected");
           $("#English").toggle(); 
           $("#Espanol").toggle();  
           // need to make english link unclickable  
           // and espanol link clickable        
       });
    });

And html:

<a id="engLink">English</a> | <a id="espLink">Español</a>

Anybody know how to do this?

Upvotes: 2

Views: 4095

Answers (2)

munch
munch

Reputation: 6321

Add a test in the click function to see if the link has the right 'nonSelected' class. If it doesn't, nothing happens on click.

$(document).ready(function(){
   $("#Espanol").hide();
   $("#espLink").addClass("nonSelected");           
   // Make english link unclickable
   $("#espLink").click(function(){
       if($(this).hasClass('nonSelected')){
           $("#engLink").addClass("nonSelected");
           $("#espLink").removeClass("nonSelected");
           $("#English").toggle(); 
           $("#Espanol").toggle();    
           // need to make espanol link unclickable  
           // and english link clickable    
       }else{
           return false;
       }         
   });

   $("#engLink").click(function(){
       if($(this).hasClass('nonSelected')){
           $("#espLink").addClass("nonSelected");
           $("#engLink").removeClass("nonSelected");
           $("#English").toggle(); 
           $("#Espanol").toggle();  
           // need to make english link unclickable  
           // and espanol link clickable 
       }else{
           return false;
       }                
   });
});

Upvotes: 2

just somebody
just somebody

Reputation: 19257

$("#espLink").click(function ()
{
    if ($(this).data('clicked')) {
        return false;
    }
    $(this).data('clicked', 1);
});

Upvotes: 1

Related Questions