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

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

方法1

使用JavaScript的setAttribute()方法禁用HTML链接。

JavaScript的setAttribute()方法： 此方法将定义的属性添加到元素中，并将其设置为传递的值。如果已指定属性已经存在，则设置/更改该值。

语法：

element.setAttribute(attrName, attrValue)

参数:

attrName: 这个参数是必需的。它指定要添加的属性的名称。
attrValue: 这个参数是必需的。它指定要添加的属性的值。

示例 1: 这个示例通过 setAttribute() 方法 向 <a> 元素添加了 class disabled。

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        How to disable HTML links 
        using JavaScript 
    </title> 
  
    <style> 
        a.disabled { 
            pointer-events: none; 
        } 
    </style> 
</head> 
  
<body> 
  
    <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>

输出：

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

方法2

使用 setAttributeNode() 和 createAttribute() 方法使用 JavaScript 禁用 HTML 链接。

JavaScript createAttribute() 方法： 该方法通过指定的名称创建一个属性，并将该属性作为属性对象返回。

语法：

document.createAttribute(attrName)

参数:

该方法接受一个参数 attrName ，该参数是必需的，它指定了所创建属性的名称。

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

JavaScript setAttributeNode() 方法 : 该方法将指定的属性节点添加到元素中。如果指定的属性已经存在，则替换它。

语法:

element.setAttributeNode(attributeNode)

参数： 此方法接受一个必需的参数 attributeNode ，它指定要添加的属性节点。

返回值： 此方法返回一个表示替换的属性节点的属性对象，否则返回 null。

示例： 此示例通过首先使用 createAttribute() 方法 创建属性，然后使用 setAttributeNode() 方法 将其添加到 <a> 元素中，将 class disable 添加到 <a> 元素中。

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        How to disable HTML links 
        using JavaScript 
    </title> 
  
    <style> 
        a.disabled { 
            pointer-events: none; 
        } 
    </style> 
</head> 
  
<body> 
  
    <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>

输出：

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

使用jQuery禁用HTML链接

jQuery prop()方法：该方法设置/返回匹配元素的属性和值。如果该方法用于返回属性值，则返回第一个选定元素的值。如果该方法用于设置属性值，则为所选元素集设置一个或多个属性/值对。

语法：

$(selector).prop(property) // Return the value of an property ****
$(selector).prop(property,value) // Set the property and value

// Set property and value using a function 
$(selector).prop(property,function(index,currentvalue))  
// Set multiple properties and values
$(selector).prop({property:value, property:value,...})

参数:

property（属性）: 此参数指定属性的名称。
value（值）: 此参数指定属性的值。
function（函数）(index, currentValue): 此参数指定返回要设置的属性值的函数。
- index（索引）: 此参数接收集合中元素的索引位置。
- currentValue（当前值）: 此参数接收所选元素的当前属性值。

addClass() 方法: 此方法向指定元素添加一个或多个类名。此方法不对现有的 class 属性进行任何操作，它仅向 class 属性添加一个或多个类名。

语法:

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

参数：

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

示例 1： 这个示例使用 addClass() 方法将类名（’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> 
  
    <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>

输出结果：

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

示例2： 本示例使用 prop()方法 ，将类（’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> 
      
        <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>