Botón deshabilitar en jQuery

  2. HowTo
  3. jQuery Howtos
  4. Botón deshabilitar en jQuery
Ankit Raj Goyal 15 febrero 2024
jQuery jQuery Button
  1. Deshabilite el botón en jQuery pasando el objeto evento al controlador de eventos onclick
  2. Deshabilitar botón en jQuery con la referencia this en el controlador de eventos onclick
  3. Deshabilitar botón en jQuery usando el método bind() para asignar el valor correcto a esto
  4. Deshabilitar botón en jQuery usando el método call() para asignar el valor correcto a esto
  5. Deshabilitar botón en jQuery con ID de elemento aprovechando la escritura dinámica flexible de JavaScript
  6. Deshabilitar botón en jQuery con la propiedad DOM deshabilitada usando el método jQuery .prop()
Botón deshabilitar en jQuery

Usaremos el controlador de eventos onclick con diferentes argumentos como el objeto evento, la referencia este y la identificación del elemento para deshabilitar el botón en jQuery en este tutorial. También encontrará consejos sobre escritura dinámica en argumentos de función, event.target frente a event.currentTarget y los métodos jQuery .prop() frente a .attr() aquí.

Deshabilite el botón en jQuery pasando el objeto evento al controlador de eventos onclick

El controlador de eventos onclick se activa cada vez que hacemos clic en el elemento de destino. De forma predeterminada, la devolución de llamada a onclick solo toma un argumento, el objeto evento.

Usemos este argumento predeterminado como nuestro primer método para deshabilitar el botón en jQuery.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Default event argument</title>
    <script type="text/javascript" src="jQuery.js"></script>
    <script type="text/javascript">
        function disable(e){
            $(e.currentTarget).attr("disabled","disabled");

            //updating the text to disabled
            $(e.currentTarget).html("I am disabled");
        }
    </script>
    <link rel="stylesheet" href="disable_button_jQuery.css">
</head>
<body>
    <div id="main">
        <button id="disable_me" onclick="disable(event)">Click to disable me</button>
    </div>
</body>
</html>

Tenemos un elemento botón donde adjuntamos un controlador de eventos onclick. La devolución de llamada toma el argumento de objeto de evento predeterminado.

Deshabilitamos el botón con la línea de código clave:

$(e.currentTarget).attr("disabled","disabled")

La propiedad currentTarget del objeto event identifica el elemento al que se adjunta el controlador de eventos, el elemento button en nuestro caso.

Finalmente, establecemos el atributo HTML deshabilitado de este elemento botón en deshabilitado con el método jQuery .attr().

También actualizamos el texto del botón para mostrar su estado deshabilitado en la siguiente línea de código con el método jQuery .html().

Aquí está la demostración de trabajo de esta solución.

botón de desactivación de jquery pasando el objeto de evento

Consejo profesional:

La propiedad event target es similar a la propiedad currentTarget, pero se refiere al elemento en el que se activa el evento. Esto podría ser diferente cuando el elemento DOM se propaga en casos de burbujeo de eventos.

Por lo tanto, es mejor usar la propiedad currentTarget en este caso.

Deshabilitar botón en jQuery con la referencia this en el controlador de eventos onclick

el problema con la referencia predeterminada this en el controlador de eventos onclick

La palabra clave this dentro del controlador de eventos onclick se refiere al elemento en el que se activa. Pero sabemos que la palabra clave JavaScript this toma su contexto dinámicamente en tiempo de ejecución.

Entonces, por defecto, no se refiere al elemento desencadenante en este caso.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Default this Keyword</title>
    <script type="text/javascript" src="jQuery.js"></script>
    <link rel="stylesheet" href="disable_button_jQuery.css"/>
    <script type="text/javascript">
        function disable(){
            console.log("The value of this by default is : " +  this);
            $(this).attr("disabled","disabled");
        }
    </script>
</head>
<body>
    <div id="main">
        <button id="disable_me" onclick="disable()">Click to disable me</button>
    </div>
</body>
</html>

Usamos la referencia this dentro de la función de devolución de llamada onclick disable. También registramos el valor del objeto this para una mejor comprensión.

Veamos la salida de este código a continuación:

Comportamiento por defecto de esta referencia

Aquí pasaron dos cosas:

  1. Primero, nuestro código no deshabilitó el botón como queríamos.
  2. En segundo lugar, cuando miramos el valor de esto en la consola, se refiere al objeto ventana. Este es el comportamiento esperado.

A medida que ejecutamos la devolución de llamada disable fuera de cualquier función en el controlador de eventos en línea, JavaScript remite dinámicamente su palabra clave this al objeto global window.

Hay un par de formas de solucionar este problema.

Deshabilitar botón en jQuery usando el método bind() para asignar el valor correcto a esto

Podemos establecer la referencia de la palabra clave this en la devolución de llamada disable del controlador onclick con el método bind().

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bind method</title>
    <script type="text/javascript" src="jQuery.js"></script>
    <link rel="stylesheet" href="disable_button_jQuery.css"/>
    <script type="text/javascript">
        function disable(e){
            console.log("The value of 'this' by explicity specifying it with bind method is : " +  this);
            $(this).attr("disabled","disabled");

            //updating the text to disabled
            $(this).html("I am disabled");
        }
    </script>
</head>
<body>
    <div id="main">
        <button id="disable_me" onclick="disable.bind(this)()">Click to disable me</button>
    </div>
</body>
</html>

Establecemos el contexto adecuado con la línea onclick = "disable.bind(this)()". Como léxicamente, la palabra clave this de onclick se refiere al elemento button, pasamos this al método bind() para establecer este valor como el valor permanente.

Después de esto, el valor de esto no cambia en tiempo de ejecución.

El resto del código es similar a nuestras soluciones anteriores. Veamos la salida a continuación:

Establezca el valor correcto de esto con el método de vinculación

Nuestro código ahora deshabilita el botón como queríamos. Además, el valor de this en la salida de la consola ahora se refiere a un HTMLButtonElement.

Gotcha a tener en cuenta

No olvides el par de corchetes después del método .bind(), así:

onclick = "disable.bind(this)()"

.bind() envuelve la función subyacente en una nueva función con el nuevo valor this y devuelve esta función. Por lo tanto, asegúrese de llamar a esta función contenedora con el par de corchetes finales ().

Deshabilitar botón en jQuery usando el método call() para asignar el valor correcto a esto

También podemos asignar el valor correcto a this cuando lo llamamos con el método call(). Tenga en cuenta que call() solo asigna un contexto particular a this para la llamada de función específica, mientras que .bind() fija el valor de this de forma permanente.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Call method</title>
    <script type="text/javascript" src="jQuery.js"></script>
    <link rel="stylesheet" href="disable_button_jQuery.css"/>
    <script type="text/javascript">
        function disable(e){
            console.log("The value of 'this' by specicifying it during execution with call method is : " +  this);
            $(this).attr("disabled","disabled");

            //updating the text to disabled
            $(this).html("I am disabled");
        }
    </script>
</head>
<body>
    <div id="main">
        <button id="disable_me" onclick="disable.call(this)">Click to disable me</button>
    </div>
</body>
</html>

Asignamos el valor adecuado de esto durante la ejecución con el fragmento de código:

onclick = "disable.call(this)"

Ya hemos desglosado la lógica del resto del código anteriormente.

Aquí está la salida de este programa.

Establezca el valor correcto de esto con el método de llamada

Gotcha a tener en cuenta

No hay un par de corchetes finales () después del método .call() aquí. El método .call() no devuelve una nueva función, como lo hace el método .bind().

Solo establece el nuevo contexto this en la misma llamada de función, por lo que no necesitamos volver a llamarlo con los corchetes al final.

Deshabilitar botón en jQuery con ID de elemento aprovechando la escritura dinámica flexible de JavaScript

Una de las cosas hermosas de JavaScript es su flexibilidad. Puedes hacer que haga lo que quieras con casi el mismo código.

Lo mismo se aplica a las funciones de JavaScript. Cada función en JavaScript puede tomar tantos argumentos como deseemos pasar.

No necesitamos pasar los mismos tipos de datos de argumento que en la definición de la función porque JS es un lenguaje de tipo dinámico.

Aprovechemos esta función de JavaScript para deshabilitar el botón en jQuery con el ID de elemento utilizando un código casi similar al que hemos escrito anteriormente.

Mencionamos que la devolución de llamada al onclick acepta solo un argumento, el objeto event, según su definición de función. ¡Pero le pasaremos el argumento del elemento id, y JavaScript no se quejará!

Aquí está el código mágico:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using Dynamic Typing</title>
    <script type="text/javascript" src="jQuery.js"></script>
    <link rel="stylesheet" href="disable_button_jQuery.css"/>
    <script type="text/javascript">
        function disable(id){     // replace id with e when you want to display the default event object type
            $("#"+id).attr("disabled","disabled");
            console.log("The type of argument \nwhen we pass the \n'id' type object as argument is : \n"
                        + typeof arguments[0]);

            // console.log("The type of argument \nwhen we pass the \ndefault 'event' object as argument is : \n"
            // + typeof arguments[0]);

             //update the text to disabled
            $("#"+id).html("I am disabled");
        }
    </script>
</head>
<body>
    <div id="main">
        <button id="disable_me" onclick="disable('disable_me')">Click to disable me</button>
    </div>
</body>
</html>

Pasamos el id a la devolución de llamada al controlador de eventos onclick ="disable('disable_me')"

JavaScript nos permite usar este argumento sin quejarnos de que su tipo es diferente al tipo de argumento de evento codificado de forma rígida en la definición de la función.

Luego lo usamos para establecer el atributo HTML deshabilitado del elemento botón en el valor deshabilitado, así:

$("#" + id).attr("deshabilitado","deshabilitado");

Veamos la salida:

Deshabilitar botón con ID de elemento

Vemos que nuestro código funciona correctamente. Además, en la salida de la consola a la derecha, el tipo de argumento es una cadena, que es nuestro elemento id pasado a la devolución de llamada.

Comparemos también el tipo de argumento cuando pasamos el argumento de tipo de evento predeterminado.

    <script type="text/javascript">
        function disable(event){     // replace id with e when you want to display the default 										//event object type
             //$("#"+id).attr("disabled","disabled");
            // console.log("The type of argument \nwhen we pass the \n'id' type object as 								//argument is : \n"
                        // + typeof arguments[0]);

            console.log("The type of argument \nwhen we pass the \ndefault 'event' object as 						argument is : \n"
                        + typeof arguments[0]);

             //update the text to disabled
           // $("#"+id).html("I am disabled");
        }
    </script>
</head>
<body>
    <div id="main">
        <button id="disable_me" onclick="disable(event)">Click to disable me</button>
    </div>

Aquí está la salida:

El argumento de objeto de evento predeterminado para la devolución de llamada

Aquí vemos que el tipo de argumento en la consola es objeto ya que evento es un objeto en JavaScript.

Deshabilitar botón en jQuery con la propiedad DOM deshabilitada usando el método jQuery .prop()

Por último, también podemos usar la propiedad DOM deshabilitada en todas nuestras soluciones anteriores. Esta propiedad corresponde al atributo disabled de HTML, y podemos acceder a ella con el método .prop() de jQuery.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using prop method</title>
    <script type="text/javascript" src="jQuery.js"></script>
    <script type="text/javascript">
        function disable(e){
            $(e.currentTarget).prop("disabled",true);

            //updating the text to disabled
            $(e.currentTarget).html("I am disabled");
        }
    </script>
    <link rel="stylesheet" href="disable_button_jQuery.css">
</head>
<body>
    <div id="main">
        <button id="disable_me" onclick="disable(event)">Click to disable me</button>
    </div>
</body>
</html>

El código es casi el mismo que usamos para el método usando el argumento predeterminado de evento anterior. Solo usamos la propiedad DOM disabled, así:

$(e.currentTarget).prop("disabled",true);

Aquí está la demostración de trabajo:

Deshabilitar botón en jQuery con propiedad DOM

Gotcha a tener en cuenta

Tenga en cuenta que la propiedad DOM deshabilitada toma un valor booleano, a diferencia del atributo HTML deshabilitado, que toma el valor deshabilitado. Por lo tanto, asegúrese de pasar el valor true en el método .prop() para este método.