HOWTO · JavaScript
Haga clic en el botón Deshabilitar JavaScript
Para deshabilitar un clic de botón a través de la convención de JavaScript, se requiere seleccionar la instancia del botón y aplicarle la propiedad deshabilitada. El atributo jQuery disabled también se usa en paralelo para deshabilitar botones después de un solo clic.
En esta página
En JavaScript, la propiedad disabled solo funciona bien para los botones rooteados como type="submit". De lo contrario, no funcionará como un "one submit button"; más bien, aceptará presentaciones múltiples.
De manera similar, el atributo jQuery disabled funciona para el botón con un tipo submit. Además, el método de envío del formulario es muy importante en este sentido.
En nuestros conjuntos de ejemplos, veremos la implementación de la propiedad disabled de JavaScript y el atributo disabled de jQuery.
Use la propiedad disabled de JavaScript para deshabilitar el clic del botón
Generalmente, definimos un formulario y su método para garantizar el propósito de los envíos. Independientemente, la propiedad de JavaScript disabled nos permite desactivar un botón.
Aquí, iniciaremos un campo input que denota el tipo submit. Después, tomando una instancia de la etiqueta input, dispararemos la propiedad disabled.
Fragmento de código:
<body>
<p>Click the button to submit data!</p>
<p>
<input type='submit' value='Submit' id='btClickMe'
onclick='save();'>
</p>
<p id="msg"></p>
</body>
<script>
function save() {
var dis = document.getElementById('btClickMe').disabled = true;
var msg = document.getElementById('msg');
msg.innerHTML = 'Data submitted and the button disabled ☺';
}
</script>
</html>
Producción:
Utilice el atributo jQuery disabled para deshabilitar un clic de botón
En jQuery, tendremos un caso de uso similar del atributo disabled. La diferencia aquí es que iniciaremos el campo input (botón tipo submit) dentro de una etiqueta form.
Nos aseguraremos de que eso funcione dentro del formulario también.
Fragmento de código:
<body>
<form id="fABC" action="#" method="POST">
<input type="submit" id="btnSubmit" value="Submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="button" value="i am normal button" id="btnTest">
<script>
$(document).ready(function () {
$("#fABC").submit(function (e) {
e.preventDefault();
$("#btnSubmit").attr("disabled", true);
$("#btnTest").attr("disabled", true);
return true;
});
});
</script>
</body>
</html>
Producción:
La forma jQuery de deshabilitar un botón es similar a JavaScript. En el ejemplo, hemos agregado un botón general con el type=button, que no puede ser manejado por el atributo o propiedad disabled.
Así es como funciona la propiedad disabled de JavaScript o jQuery para inactivar un botón de envío.
