How to remove the clickable behavior from a disabled link using jQuery

Topic: JavaScript / jQuery« Prev|Next »

Answer: Use the jQuery removeAttr() method

The following example will show you how to remove the clickable behavior from a hyperlink having the class .disabled using jQuery. The clickable behavior from CodeLab link in the example menu is disabled through removing the href attribute from the link using the jQuery removeAttr() method.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery Removing Clickable Behavior</title>
  • <style type="text/css">
  •     .menu a{
  •         margin-left: 20px;
  •     }
  •     .menu a.disabled{
  •         color: #666;
  •         text-decoration: none;
  •     }
  • </style>
  • <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $(".menu a").each(function(){
  •         if($(this).hasClass("disabled")){
  •             $(this).removeAttr("href");
  •         }
  •     });
  • });
  • </script>
  • </head>
  • <body>
  •     <div class="menu">
  •         <a href="http://www.tutorialrepublic.com/html-tutorial/">HTML</a>
  •         <a href="http://www.tutorialrepublic.com/css-tutorial/">CSS</a>
  •         <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/">Bootstrap</a>
  •         <a href="http://www.tutorialrepublic.com/codelab.php" class="disabled">CodeLab</a>
  •     </div>
  •     <p><strong>Note:</strong> In this example we have removed the clickable behavior from links having the class "disabled".<p>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.