Dado un documento HTML y la tarea es habilitar o deshabilitar el botón de envío de formulario en jQuery.
Enfoque: para habilitar o deshabilitar el botón de envío de formulario, usamos el siguiente fragmento de código.
$('#enabled').click(function () {
if ($('#submit-button').is(':disabled')) {
$('#submit-button').removeAttr('disabled');
} else {
$('#submit-button').attr('disabled', 'disabled');
}
});
En el código anterior, habilitado es la identificación de la casilla de verificación utilizada y el botón de envío es el nombre de clase del botón de envío utilizado.
En la siguiente implementación del enfoque anterior, jQuery-1.11.js contiene el código fuente que se encuentra aquí ( jQuery v1.11.1 ).
Ejemplo: A continuación se muestra la implementación del enfoque anterior.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Disable/enable the form submit button
</title>
<script src="jQuery-1.11.js"></script>
<style>
h1 {
color: green;
margin-left: 12px;
}
.checkbox-round {
width: 1.0em;
height: 1.0em;
background-color: white;
border-radius: 50%;
vertical-align: middle;
border: 1px solid #ddd;
-webkit-appearance: none;
outline: none;
cursor: pointer;
padding-right: 2px;
margin-left: 8px;
}
.checkbox-round:checked {
background-color: green;
}
#submit-button {
margin-top: 12px;
margin-left: 12px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<input class="checkbox-round" id="enabled"
name="enabled" type="checkbox" value="y" />
I accept the terms and
conditionof GeeksforGeeks<br>
<input id="submit-button" disabled="disabled"
name="Submit" type="submit" value="Accept" />
<script>
$('#enabled').click(function () {
if ($('#submit-button').is(':disabled')) {
$('#submit-button').removeAttr('disabled');
} else {
$('#submit-button').attr('disabled', 'disabled');
}
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanbose2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA