In this post i am going to explain how to disable links in a dynamically generated web page using jquery and javascript functions. HTML links has the href attribute which specifies the location it will be redirected once it is clicked. In order to disable links we need to work with the href attribute.

---

This is effective when you want to provide a different behavior than loading the link when the link is clicked. Consider a situation where you want to call a javascript function on clicking a link and execute some code. If you specify both href and onclick function , href attribute will redirect the user to the given url.Hence the onclick function will not be called. So in order to achieve our intended purpose we need to block the href. Next section ill provide ways to manage disabling links.

Javascript void function allows you to prevent the default behavior when clicking a link. It will return a null value so that the browser will not redirect to a new url and the onclick function will be executed.

        Link Text

        validateLink = function () {                
                // Code inside this function is executed
        };

        $("#disableLink").click(function () {
                $("a[href]").each(function(){
                    $(this).attr('href','javascript:void(0)');
                });
        });

 

Code Explanation

1. After loading the page all the links will be active
2. Once you click the disable link button jquery function is called and looks for ‘’ tags which has a href attribute.
3. Then it traverses through each link tag and set the value of href attribute to javascript void(0) which will disable the link from opening in a window.

Jquery provides a preventDefault function which can be used on any event call on html elements. Once you apply this function on the click event of a html link tag it will stop the browser from redirecting to a new url and the onclick function will be executed.

        validateLink = function () {                
                // Code inside this function is executed
        };

        $("#disableLink").click(function () {
                $("a[href]").click(function(e){
                    e.preventDefault();
                });
        });

 

Code Explanation

1. After loading the page all the links will be active
2. Once you click the disable link button jquery function is called and looks for ‘’ tags which has a href attribute.
3. Then it applies the preventDefault function on a tags which are filtered above.
4. Once the link is clicked it will stop the link from redirecting to the new url.

 

Disabling links can be achieved using both javascript and jquery as mentioned above. Difference between these two methods is that when you use jquery the preventDefault method works internally. Value of the href attribute is not changed. But once you use normal javascript href value is replaced by void(0) method and cannot be replaced back to original link.