如何使用 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() 方法的帮助下将禁用的类添加到 元素。

  
  
     
         
            How to disable HTML links
            using JavaScript
        
          
        
            a.disabled {
                pointer-events: none;
            }
        
     
      
      
      
          
            GeeksForGeeks  
        
      
        
            LINK
        
          
        
          
         
            disable
        
          
        
        
          
        
            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";
            }         
         
      

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 2：本示例在setAttributeNode() 方法的帮助下将类 disable 添加到 元素，方法是首先使用createAttribute() 方法创建一个属性，然后将其添加到元素。

 
 
     
         
            How to disable HTML links
            using JavaScript
        
          
        
            a.disabled {
                pointer-events: none;
            }
        
     
      
     
      
         
            GeeksForGeeks 
        
      
        
            LINK
        
          
        
          
         
            disable
        
          
        
        
          
        
            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";
            }         
         
     
                    

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

使用 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：此参数指定属性的值。
  • 函数(index,currentvalue)：此参数指定返回要设置的属性值的函数。
    • index：该参数接收元素在集合中的索引位置。
    • currentValue：此参数接收所选元素的当前属性值。
• addClass() 方法：该方法向指定元素添加一个或多个类名。此方法对现有的类属性不做任何事情，它向类属性添加一个或多个类名。

  句法：

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

  参数：

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

示例 1：此示例在addClass() 方法的帮助下将 class(‘disabled’) 添加到 元素。

 
 
     
         
            How to disable HTML links
            using jQuery
        
          
        
        
          
        
            a.disabled {
                pointer-events: none;
            }
        
     
      
     
      
         
            GeeksForGeeks 
        
  
        
            LINK
        
          
        
          
         
            disable
        
          
        
        
          
        
            function gfg_Run() {
                $('a').addClass("disabled");
                $('a').css('color', 'black');
                $('#GFG_DOWN').text("Link disabled");
            }         
         
     
                    

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 2：此示例在prop() 方法的帮助下将 class(‘disabled’) 添加到 元素。

 
 
     
         
            How to disable HTML links
            using jQuery
        
          
        
        
          
        
            a.disabled {
                pointer-events: none;
            }
        
     
      
     
      
         
            GeeksForGeeks 
        
  
        
            LINK
        
          
        
          
         
            disable
        
          
        
        
          
        
            function gfg_Run() {
                $('a').prop("class","disabled");
                $('a').css('color', 'black');
                $('#GFG_DOWN').text("Link disabled");
            }         
         
     
                    

输出：

• 在点击按钮之前：
  
• 点击按钮后：