EDUCBA

Home Software Development Software Development Tutorials jQuery Tutorial jQuery disable link

jQuery disable link

Updated April 7, 2023

jQuery disable link

Introduction to Jquery disable link

The jquery disable link is a function to deactivate the href link of the web application or websites. The disable link is a method used to disable the web link as per the user’s requirement. The disable link is a method to disabling the hyperlink or defuses the <a> tag. The disable link is the function to disabling the href link or web link but available in the web application. The disable link is a deactivating <a> tag using class or id but available in word format. The disable link is defusing HTML links to work in the Websites as per requirement.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Syntax

  • The syntax is mentioned below.
$( '#dislink' ).click(function() {
$( "#db" ).removeAttr( 'href' );
});
  • The removeAttr() method is using with ‘href’ attribute.
  • The id = db is represent the <a> tag to focus on this html part.
  • The removeAttr() method is helping to deactivate the web link.
  • The href link is disabling after working the id of the button (“#dislink”).
  • The disable link with click syntax is below.
$( 'a' ) .click(function() { return false; });
  • The click() method is using with the return false command.
  • The weblink is not operating because of false conditions.
  • The <a> tag is defusing the place of the href link.
  • The disable link with addClass() syntax is below.
$( 'selector' ).addClass( "disabled" );
  • The addClass() method is using disable command.
  • The HTML link is not operating because of the disabling condition.
  • The <a> tag is defusing the place of the web application link.
  • The disable link with prop() syntax is below.
$(  'selector' ).prop( "class", "disable" );
  • The prop() method is using disable command.
  • The jquery link is not operating because of the “disable” command.
  • The <a> tag is displaying the place of the href link.

How to disable link in jquery?

  • In jquery, to disable the link need to either download the jquery library or use the jquery CDN version link.
    • Download the latest development version or product version of jquery from jquery.com.
    • The jquery version place inside of the html page. The jquery link is below.
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
  • The HTML page is created with filename and .html extension.
    • Example: jquerydisablelink.html
  • The <script> tag is placing inside of the body section on the HTML page.
    • <script> write a jquery disable link code here… </script>
  • The disable link syntax is using in the script tag.
$('#dislink').click(function(){
$("#db").removeAttr('href');
});
  • The disable link syntax is used as per source coding.
$( 'a' ) .click(function () { return false; });

OR

$(  'selector' ).addClass( "disabled" );

OR

$(  'selector' ).prop( "class", "disable" );
  • Create <a> tag with href link in the body section of the HTML page.
<a href="https://www.w3schools.com" id ="db"> online tutorial </a> <br>
  • Create a button with “id = dislink” to disabling the href link.
<button id = "dislink" value = "jquery disable link!" > jquery disable link! </button>
  • Combine all procedures to disable links in jquery.
<!DOCTYPE>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$( '#dislink' ).click(function(){
$("#db") .removeAttr('href');
});
});
</script>
</head>
<body>
<a href = "https://www.w3schools.com" id ="db"> online tutorial </a> <br>
<button id = "dislink" value = "jquery disable link!" > jquery disable link! </button>
</body>
</html>

Examples

Here are the following example mention below

Example #1

The basic disable link example and output is below.

<!DOCTYPE>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$( '#dislink' ).click(function(){
$( "#db" ).removeAttr( 'href' );
});
});
</script>
</head>
<body>
<a href = "https://www.w3schools.com" id ="db"> online tutorial </a> <br>
<button id = "dislink" value = "jquery disable link!" > jquery disable link! </button>
</body>
</html>

Before disabling link output is below.

jQuery disable link output 1

After disable link output is below.

jQuery disable link output 1.2

Description:

  • The basic disable link is using removeAttr( ‘href’ ) to disable the href link.
  • The “jquery disable link” is the button to be used for deactivating the web link.

Example #2

The jquery disable link example and output is below.

<!DOCTYPE>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$( 'a' ).click(function () { return false; });
});
</script>
</head>
<body>
<h2> jquery disable link example </h2>
<a href = "https://www.w3schools.com" id ="db"> online tutorial of the jquery </a> <br>
</body>
</html>

Output:

jQuery disable link output 2

Description:

  • The click method is used to working href link.
  • The href link is not working due to the click function return false.

Example #3

The disable link with addClass() example and output are below.

<!DOCTYPE>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<style>
#id.disabled {
pointer-events: none;
}
</style>
</head>
<body>
<a href = "www.educba.com" id = "db">
online tutorial of the jquery
</a>
<br><br>
<button onclick = "link_disable()">
disable href link
</button>
<script>
function link_disable() {
$('#db') .addClass( "disabled" );
$('#db') .css( 'color', 'grey' );
}
</script>
</body>
</html>

Before disable link output is below.

jQuery disable link output 3

After disable link output is below.

output 3.2

Description:

  • The addMethod() is working disabled command inside the function.
  • The href link is not working due to disabling command.

Example #4

The disable link with prop() example and output are below.

<!DOCTYPE>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<style>
#id.disabled {
pointer-events: none;
}
</style>
</head>
<body>
<a href = "www.educba.com" id = "db">
online tutorial of the jquery
</a>
<br> <br>
<button onclick = "link_disable()">
disable href link
</button>
<script>
function link_disable() {
$( '#db' ).prop( "class", "disabled" );
$( '#db' ).css( 'color', 'red' );
}
</script>
</body>
</html>

Before disable link output is below.

output 4

After disable link output is below.

output 4.2

Conclusion

  • The Jquery disable link is creating a useful, interacting web application.
  • The disable link is creating a powerful tool to handle web links.
  • The disable link is an elegant, powerful, advanced features href link in web application.
  • The disable link is giving authority to activate or deactivates the href link in the websites.

 Recommended Articles

This is a guide to jQuery disable link. Here we discuss How to disable link in jquery along with the examples and outputs. You may also look at the following article to learn more –

  1. jQuery Visibility 
  2. jQuery Deferred
  3. jQuery global variable
  4. jQuery map()
quiz