Hay un elemento de entrada que está deshabilitado, la tarea es habilitarlo usando JQuery. Aquí hay algunos ejemplos discutidos.
Para entender el ejemplo primero algunos métodos para saber.
Método JQuery prop()
Este método establece/devuelve propiedades y valores de los elementos seleccionados.
Si usamos este método para devolver el valor de la propiedad, devolverá el valor del PRIMER elemento seleccionado.
Si usamos este método para establecer valores de propiedad, establecerá uno o más pares de propiedad/valor para el conjunto de elementos seleccionados.
Sintaxis:
- Devuelve el valor de la propiedad:
$(selector).prop(property)
- Establezca la propiedad y el valor:
$(selector).prop(property, value)
- Establezca la propiedad y el valor usando la función:
$(selector).prop(property, function(index, currentValue))
- Establecer múltiples propiedades y valores:
$(selector).prop({property:value, property:value, ...})
Método JQuery removeAttr()
Este método elimina uno o más atributos de los elementos coincidentes.
Sintaxis:
$(selector).removeAttr(attribute)
Parámetros:
- atributo: este parámetro es obligatorio. Especifica uno o más de un atributo para eliminar. Si desea eliminar varios atributos, use un espacio entre los nombres de los atributos.
Ejemplo-1: En este ejemplo, el elemento de entrada está habilitado por el método prop() al establecer la propiedad deshabilitada en falso.
<!DOCTYPE HTML>
<html>
<head>
<title>
JQuery | Remove “disabled” attribute.
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style = "text-align: center;">
<h1 style = "color: green;" >
GeeksForGeeks
</h1>
Input Box: <input type = "text" disabled = "disabled"
class = "Disable" value = ""/>
<br>
<br>
<button id = "enable">
click to Enable
</button>
<script>
$("#enable").click(function(event) {
event.preventDefault();
$('.Disable').prop("disabled", false);
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-2: En este ejemplo, el elemento de entrada está habilitado por el método removeAttr() al eliminar la propiedad disabled .
<!DOCTYPE HTML>
<html>
<head>
<title>
JQuery | Remove “disabled” attribute.
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style = "text-align: center;">
<h1 style = "color: green;" >
GeeksForGeeks
</h1>
Input Box: <input type = "text" disabled = "disabled"
class = "Disable" value = ""/>
<br>
<br>
<button id = "enable">
click to Enable
</button>
<script>
$("#enable").click(function(event) {
event.preventDefault();
$('.Disable').removeAttr("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