Portada » JavaScript » Habilitar Botón al seleccionar checkboxes [5 formas]

Habilitar Botón al seleccionar checkboxes [5 formas]

Habilitar Botón al seleccionar checkboxes. Tengo varias casillas de verificación y un botón de envío que inicialmente está deshabilitado. Al marcar una casilla, el botón se habilita y al desmarcar, el botón se deshabilita nuevamente.

Habilitar Botón al seleccionar checkboxes

A continuación, detallaremos 5 formas para habilitar un botón al seleccionar checkboxes.

A) Usando JavaScript

Para lograr nuestro objetivo de activar la casilla de verificación al marcar al menos 1 checkbox podemos usar el lenguaje JavaScript. Veamos un ejemplo.

<table>
<tbody><tr>
<td>
<input type="checkbox" onclick="javacript:EnableDisableButton(this,1);"><br>
<input type="checkbox" onclick="javacript:EnableDisableButton(this,2);"><br>
<input type="checkbox" onclick="javacript:EnableDisableButton(this,3);"><br>
<input type="checkbox" onclick="javacript:EnableDisableButton(this,4);"><br>
<input type="checkbox" onclick="javacript:EnableDisableButton(this,5);"><br>
<input type="checkbox" onclick="javacript:EnableDisableButton(this,6);"><br>
<input id="textbox1" type="text" name="t3"><br>
<input id="button1" type="submit" value="Enable / Disable" disabled=""><br>
</td>
</tr>
</tbody></table>
<script type="text/javascript">
var idList = ";"
document.getElementById('textbox1').value = idList;

function EnableDisableButton(cb, id) {

if (cb.checked == 1) {
idList = idList + id + ";"
document.getElementById('textbox1').value = idList;
}

if (cb.checked == 0) {
var v;
v = ";" + id + ";"
idList = idList.replace(v, ";");
document.getElementById('textbox1').value = idList;
}

if (idList == ";") {
document.getElementById('button1').disabled = true;
} else {
document.getElementById('button1').disabled = false;
}

}

</script>

B) Segunda forma: Usando jQuery

Si bien podemos hacerlo usando JavaScript, también podemos usar jQuery para lograr tal propósito de habilitar un botón al marcar un checkbox o varios checkboxes.

$(function() {
$(".checkbox").click(function(){
$('.delete').prop('disabled',$('input.checkbox:checked').length == 0);
});
});

Ejemplo completo

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.6.2.js"></script>

</head>
<body>
<p><input type="checkbox" name="msg[]" value="PHP" class="checkbox" />PHP</p>
<p><input type="checkbox" name="msg[]" value="Python" class="checkbox" />Python</p>
<p><input type="checkbox" name="msg[]" value="Ruby" class="checkbox" />Ruby</p>
<br>
<button type="submit" class="delete" disabled="disabled">Eliminar registros</button>

<script type="text/javascript">
$(function() {
$(".checkbox").click(function(){
$('.delete').prop('disabled',$('input.checkbox:checked').length == 0);
});
});
</script>
</body>
</html>

C) Usando Función ATTR

Intente esto para verificar si todas las casillas de verificación no están marcadas y luego deshabilite el botón con DISABLED, caso contrario se habilitará para poder enviar el formulario.

<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.6.2.js"></script>
<script type="text/javascript">
$(function() {
$(".checkbox").click(function() {
$(".delete").attr("disabled", !$(".checkbox:checked").length);
});
});
</script>
</head>
<body>
<p><input type="checkbox" name="msg[]" value="PHP" class="checkbox" />PHP</p>
<p><input type="checkbox" name="msg[]" value="Python" class="checkbox" />Python</p>
<p><input type="checkbox" name="msg[]" value="Ruby" class="checkbox" />Ruby</p>
<br>
<button type="submit" class="delete" disabled="disabled">Eliminar registros</button>
</body>
</html>

D) Usando PROP jQuery

Otra opción para poder controlar los eventos de un checkbox y habilitar elementos dentro de un formulario.

<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
</head>
<body>
<p><input class="form-check-input tab1_chk" type="checkbox" name="2[]" value="1">PHP</p>
<p><input class="form-check-input tab1_chk" type="checkbox" name="2[]" value="2">C++</p>
<p><input class="form-check-input tab1_chk" type="checkbox" name="2[]" value="2">Python</p>
<br>
<button type='button' class='tab1_btn' name="next" id="next">Eliminar</button>
<script type="text/javascript">
$('.tab1_btn').prop('disabled', !$('.tab1_chk:checked').length);
$('input[type=checkbox]').click(function() {
console.log($('.tab1_chk:checkbox:checked').length);
if ($('.tab1_chk:checkbox:checked').length > 0) {
$('.tab1_btn').prop('disabled', false);
} else {
$('.tab1_btn').prop('disabled', true);
}
});
</script>
</body>
</html>

E) Longitud de CheckBox

Una opción fiable es de comprobar la longitud de todas las casillas de verificación marcadas. Por lo tanto, podemos deducir lo siguiente.

  • Si la longitud es 0, puede establecer la propiedad disabled en true
  • Caso contrario, elimine el atributo DISABLED del botón.

Puede activar el evento de cambio para establecer la propiedad del botón al cargar la página.

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="checkbox" name="searchValues" /> PHP</td>
</tr>
<tr>
<td><input type="checkbox" name="searchValues" /> C++</td>
</tr>
<tr>
<td><input type="checkbox" name="searchValues" /> Python</td>
</tr>
</table>
<input type="submit" id="submitButton" th:value="Speichern" name="submit" disabled="disabled"/>
<script type="text/javascript">
$(function(){
$("input[type='checkBox']").change(function(){
var len = $("input[type='checkBox']:checked").length;
if(len == 0)
$("input[type='submit']").prop("disabled", true);
else
$("input[type='submit']").removeAttr("disabled");
});
$("input[type='checkBox']").trigger('change');
});
</script>
</body>
</html>

CONCLUSIÓN

  • Estas opciones suelen ser muy usado en proyectos web o páginas web que usan opciones para validar alternativas, como ser: Zonas turísticas, deportes favoritos, países, cursos, etc. Ahora, se debe de validar para que el formulario no vaya vacío.
  • El botón de envió de formulario se mostrará deshabilitado para que el usuario marque, aunque sea una casilla de verificación.
  • Con esto podemos validar el formulario en el entorno del cliente (navegador web), sin tener que recurrir a la validación del servidor web (PHP).
  • La implementación es muy sencilla, solo bastaría crear una función con pocas líneas de código y podemos tener un formulario muy intuitivo.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad