如何使用JavaScript/jQuery禁用HTML链接

给出一个HTML链接，任务是通过使用JavaScript/jQuery禁用该链接。

使用JavaScript禁用HTML链接

createAttribute() 方法。该方法用定义的名称创建一个属性，并将该属性作为一个属性对象返回。

语法:

document.createAttribute(attrName)

参数：此方法接受单参数attrName，这是必须的。它指定了创建的属性的名称。

返回值：它返回一个节点对象，表示创建的属性。

setAttribute()方法。该方法将定义的属性添加到一个元素中，并给它传递值。在指定属性已经存在的情况下，该值被设置/改变。

语法:

element.setAttribute(attrName, attrValue)

参数:

attrName。这个参数是必需的。它指定了要添加的属性的名称。
attrValue。这个参数是必需的。它指定了要添加的属性的值。
setAttributeNode() 方法。该方法将指定的属性节点添加到一个元素中。如果指定的属性已经存在，该方法将取代它。

语法:

element.setAttributeNode(attributeNode)

参数：该方法接受单个参数attributeNode，这是必须的。它指定了要添加的属性节点。

例子1：这个例子借助 setAttribute() 方法在 <a> 元素上增加了 disabled 类。

<!DOCTYPE HTML>  
<html>  
    <head> 
        <title> 
            How to disable HTML links
            using JavaScript
        </title>
          
        <style>
            a.disabled {
                pointer-events: none;
            }
        </style>
    </head> 
      
    <body style = "text-align:center;">  
      
        <h1 style = "color:green;" >  
            GeeksForGeeks  
        </h1>
      
        <a href = "#" id = "GFG_UP">
            LINK
        </a>
          
        <br><br>
          
        <button onclick = "gfg_Run()"> 
            disable
        </button>
          
        <p id = "GFG_DOWN" style =
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            var link = document.getElementById('GFG_UP');
            var down = document.getElementById('GFG_DOWN');
   
            function gfg_Run() {
              link.setAttribute("class", "disabled");
              link.setAttribute("style", "color: black;");
              down.innerHTML = "Link disabled";
            }         
        </script> 
    </body>  
</html>

输出:

在点击按钮之前。
点击该按钮后。

例子2：这个例子利用 setAttributeNode() 方法在 <a> 元素中加入 disable 類別，首先使用 createAttribute() 方法建立一個屬性，然後將它加入 <a> 元素。

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            How to disable HTML links
            using JavaScript
        </title>
          
        <style>
            a.disabled {
                pointer-events: none;
            }
        </style>
    </head> 
      
    <body style = "text-align:center;"> 
      
        <h1 style = "color:green;" > 
            GeeksForGeeks 
        </h1>
      
        <a href = "#" id = "GFG_UP">
            LINK
        </a>
          
        <br><br>
          
        <button onclick = "gfg_Run()"> 
            disable
        </button>
          
        <p id = "GFG_DOWN" style =
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            var link = document.getElementById('GFG_UP');
            var down = document.getElementById('GFG_DOWN');
  
            function gfg_Run() {
                var attr = document.createAttribute("class");
                attr.value = "disabled";                         
                link.setAttributeNode(attr);
                link.setAttribute("style", "color: black;");
                down.innerHTML = "Link disabled";
            }         
        </script> 
    </body> 
</html>

输出:

在点击按钮之前。
点击该按钮后。

使用jQuery禁用HTML链接

jQuery prop()方法。这个方法设置/返回匹配元素的属性和值。如果这个方法是用来返回属性值，它返回第一个被选中的元素的值。如果此方法用于设置属性值，它为所选元素集设置一个或多个属性/值对。

语法:

返回一个属性的值。

$(selector).prop(property)

设置属性和值。

$(selector).prop(property,value)

使用一个函数设置属性和值。

$(selector).prop(property,function(index,currentvalue))

设置多个属性和值。

$(selector).prop({property:value, property:value,...})

参数:

property。这个参数指定了属性的名称。
value。这个参数指定属性的值。
function(index,currentvalue):这个参数指定了一个函数，返回要设置的属性值。
index。该参数接收元素在集合中的索引位置。
currentValue:该参数接收所选元素的当前属性值。
addClass()方法。这个方法为指定的元素添加一个或多个类名。这个方法对现有的类属性不做任何处理，它为类属性添加一个或多个类名。

语法:

$(selector).addClass(className,function(index,currentClass))

参数:

className。这个参数是必需的。它指定了一个或多个要添加的类名。
function(index,currentClass):这个参数是可选的。它指定了一个函数，返回一个或多个要添加的类名。
index。它返回该元素在集合中的索引位置。
className。它返回所选元素的当前类别名称。

例子1：这个例子在addClass()方法的帮助下，把class('disabled')添加到<a>元素。

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            How to disable HTML links
            using jQuery
        </title>
          
        <script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
          
        <style>
            a.disabled {
                pointer-events: none;
            }
        </style>
    </head> 
      
    <body style = "text-align:center;"> 
      
        <h1 style = "color:green;" > 
            GeeksForGeeks 
        </h1>
  
        <a href = "#" id = "GFG_UP">
            LINK
        </a>
          
        <br><br>
          
        <button onclick = "gfg_Run()"> 
            disable
        </button>
          
        <p id = "GFG_DOWN" style = 
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            function gfg_Run() {
                ('a').addClass("disabled");
                ('a').css('color', 'black');
                $('#GFG_DOWN').text("Link disabled");
            }         
        </script> 
    </body> 
</html>

输出:

在点击按钮之前。
点击该按钮后。

例子2：这个例子在prop()方法的帮助下，给<a>元素添加了class('disabled')。

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            How to disable HTML links
            using jQuery
        </title>
          
        <script src = 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
          
        <style>
            a.disabled {
                pointer-events: none;
            }
        </style>
    </head> 
      
    <body style = "text-align:center;"> 
      
        <h1 style = "color:green;" > 
            GeeksForGeeks 
        </h1>
  
        <a href = "#" id = "GFG_UP">
            LINK
        </a>
          
        <br><br>
          
        <button onclick = "gfg_Run()"> 
            disable
        </button>
          
        <p id = "GFG_DOWN" style = 
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            function gfg_Run() {
                ('a').prop("class","disabled");
                ('a').css('color', 'black');
                $('#GFG_DOWN').text("Link disabled");
            }         
        </script> 
    </body> 
</html>