JavaScript
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.
