En este artículo, demostraremos cómo habilitar y deshabilitar botones usando jQuery. Este artículo requiere cierta familiaridad con HTML, CSS, JavaScript y jQuery. La función jQuery prop() se puede usar para deshabilitar un botón.
Los valores de propiedad se pueden recuperar explícitamente usando el método prop() . El método prop() solo devuelve el valor de propiedad del primer elemento coincidente del conjunto. Para una propiedad cuyo valor no se ha establecido, o para un conjunto coincidente que no contiene elementos, devuelve Undefined .
Sintaxis:
El atributo booleano del elemento seleccionado se puede establecer en verdadero o falso usando este método.
$().prop(property, value)
La función devuelve un valor booleano. Siempre que el elemento seleccionado contenga un atributo booleano (deshabilitado, marcado), de lo contrario devuelve verdadero .
$().prop(property)
¿Qué es un atributo deshabilitado?
Este es un atributo booleano que indica que el elemento no debe mostrarse. Es inutilizable usar un elemento que está deshabilitado. Puede configurar el atributo deshabilitado para evitar que el elemento se use hasta que se cumpla otra condición (como marcar una casilla).
Ejemplo: cuando hace clic en el botón de abajo, el botón de arriba está deshabilitado, y cuando hace doble clic en el botón de abajo, el botón de arriba está habilitado. El accesorio se aplica en este ejemplo para demostrar cómo se usa correctamente y cómo se puede aplicar.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
</head>
<body style="text-align: center;
border:2px solid green;
min-height:240px;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<button id="update">
update me
</button>
<div style="margin-top:50px;">
<button id="change">
click me
</button>
</div>
<script>
$('#change').on('click', function () {
$('#update').prop('disabled', true);
}
);
$('#change').on('dblclick', function () {
$('#update').prop('disabled', false);
});
</script>
</body>
</html>
Producción:
producción
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA