JavaScript Tutoriales y ejemplos

Habilitar Botón al seleccionar checkboxes [5 formas]

Enable button when checkboxes selected

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.
Descarga 156 Sistemas PHP & MySQL

¿Te gusto el artículo? Puedes apoyarme invitándome un Café

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Deja una respuesta

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

Botón volver arriba