Dado un enlace HTML y la tarea es deshabilitar el enlace usando JavaScript/jQuery.
Deshabilitar enlace HTML usando JavaScript
- Método createAttribute(): este método crea un atributo con el nombre definido y devuelve el atributo como un objeto de atributo.
Sintaxis:
document.createAttribute(attrName)
Parámetros: este método acepta un solo parámetro attrName que es obligatorio. Especifica el nombre del atributo creado.
Valor devuelto: Devuelve un objeto de Node, denotando el atributo creado.
- Método setAttribute(): este método agrega el atributo definido a un elemento y lo asigna al valor pasado. En caso de que el atributo especificado ya exista, el valor se establece/cambia.
Sintaxis:
element.setAttribute(attrName, attrValue)
Parámetros:
- attrName: este parámetro es obligatorio. Especifica el nombre del atributo a agregar.
- attrValue: este parámetro es obligatorio. Especifica el valor del atributo a agregar.
- Método setAttributeNode(): este método agrega el Node de atributo especificado a un elemento. En caso de que el atributo especificado ya exista, este método lo reemplaza.
Sintaxis:
element.setAttributeNode(attributeNode)
Parámetros: este método acepta un atributo de parámetro único que se requiere. Especifica el Node de atributo que se agregará.
Ejemplo 1: este ejemplo agrega la clase disabled al elemento <a> con la ayuda del método setAttribute() .
<!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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo agrega la clase deshabilitada al elemento <a> con la ayuda del método setAttributeNode() creando primero un atributo usando el método createAttribute() y luego agregándolo al elemento <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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Deshabilitar enlace HTML usando jQuery
- Método jQuery prop(): este método establece/devuelve propiedades y valores de los elementos coincidentes. Si este método se usa para devolver el valor de la propiedad, devuelve el valor del primer elemento seleccionado. Si este método se usa para establecer valores de propiedad, establece uno o más pares de propiedad/valor para el conjunto de elementos seleccionados.
Sintaxis:
- Devolver el valor de una propiedad:
$(selector).prop(property)
- Establezca la propiedad y el valor:
$(selector).prop(property,value)
- Establecer propiedad y valor usando una función:
$(selector).prop(property,function(index,currentvalue))
- Establecer múltiples propiedades y valores:
$(selector).prop({property:value, property:value,...})
Parámetros:
- propiedad: este parámetro especifica el nombre de la propiedad.
- value: este parámetro especifica el valor de la propiedad.
- función (índice, valor actual): este parámetro especifica una función que devuelve el valor de propiedad para establecer.
- índice: este parámetro recibe la posición de índice del elemento en el conjunto.
- currentValue: este parámetro recibe el valor de propiedad actual de los elementos seleccionados.
- Devolver el valor de una propiedad:
- Método addClass(): este método agrega uno o más nombres de clase a los elementos especificados. Este método no hace nada con los atributos de clase existentes, agrega uno o más nombres de clase al atributo de clase.
Sintaxis:
$(selector).addClass(className,function(index,currentClass))
Parámetros:
- className: este parámetro es obligatorio. Especifica uno o más de un nombre de clase para agregar.
- función (índice, clase actual): este parámetro es opcional. Especifica una función que devuelve uno o más nombres de clase para agregar.
- index: Devuelve la posición del índice del elemento en el conjunto.
- className: Devuelve el nombre de clase actual del elemento seleccionado.
Ejemplo 1: este ejemplo agrega class(‘disabled’) al elemento <a> con la ayuda del método addClass() .
<!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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo agrega class(‘disabled’) al elemento <a> con la ayuda del método prop() .
<!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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA