Tengo un formulario simple con algunas casillas de verificación y estoy tratando de obtenerlo para que el botón Enviar esté habilitado cuando todas las casillas de verificación estén marcadas.
He estado jugando con algunas de las respuestas de aquí: habilite el botón Enviar solo cuando todos los campos estén llenos
Pero parece que no habilita el botón de enviar o lo habilita justo después de marcar uno. Esto es lo que tengo:
$(document).on("change keyup", ".required", function(e) { let Disabled = true; $(".required").each(function() { let value = this.value; if (value && value.trim() != "") { Disabled = false; } else { Disabled = true; return false; } }); if (Disabled) { $(".toggle-disabled").prop("disabled", true); } else { $(".toggle-disabled").prop("disabled", false); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="#"> <p> <label> <input type="checkbox" class="filled-in box required" name="item" /> <span>Filled in</span> </label> </p> <p> <label> <input type="checkbox" class="filled-in box required" name="item" /> <span>Filled in</span> </label> </p> <p> <label> <input type="checkbox" class="filled-in box required" name="item" /> <span>Filled in</span> </label> </p> <p> <button type="button" class="toggle-disabled" disabled>Submit</button> </p> </form> Es extraño porque funciona, pero tan pronto como marco una casilla, el botón Enviar está habilitado. Parece que tengo todas las piezas allí, pero no estoy seguro si es algo dentro de la clave de change keyup o algo más.
EventListener para verificar los cambios realizados dentro de la entrada (casillas de verificación). No necesita escuchar todos los cambios o cambios de keyups en todo el documento. Así que solo use $('form input[type="checkbox"]').change(function(){ ... } que ahorrará recursos.$('form input[type="checkbox"]:not(:checked)').length . Esto le dará el número exacto de casillas de verificación que están actualmente sin marcar.if/else-statement para ver si ese recuento es mayor que 0 (lo que significa que al menos 1 casilla de verificación aún está sin marcar. En mi ejemplo, reemplacé la if/else-statement con un conditional ternary operator para guardar un Pocas lineas: $('form input[type="checkbox"]').change(function(){ var allChecked = !!$('form input[type="checkbox"]:not(:checked)').length; $('.toggle-disabled').prop('disabled', allChecked); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="#"> <p> <label> <input type="checkbox" class="filled-in box required" name="item" /> <span>Filled in</span> </label> </p> <p> <label> <input type="checkbox" class="filled-in box required" name="item" /> <span>Filled in</span> </label> </p> <p> <label> <input type="checkbox" class="filled-in box required" name="item" /> <span>Filled in</span> </label> </p> <p> <button type="button" class="toggle-disabled" disabled>Submit</button> </p> </form>Debe realizar un seguimiento del conteo como lo sugiere @tacoshy, he modificado su código para reflejar los cambios.
$(document).on("change keyup", ".required", function(e) { let Disabled = $(".required").length; $(".required").each(function() { if(this.checked) Disabled--; }); if (Disabled) { $(".toggle-disabled").prop("disabled", true); } else { $(".toggle-disabled").prop("disabled", false); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="#"> <p> <label> <input type="checkbox" class="filled-in box required" name="item" /> <span>Filled in</span> </label> </p> <p> <label> <input type="checkbox" class="filled-in box required" name="item" /> <span>Filled in</span> </label> </p> <p> <label> <input type="checkbox" class="filled-in box required" name="item" /> <span>Filled in</span> </label> </p> <p> <button type="button" class="toggle-disabled" disabled>Submit</button> </p> </form>Simplemente compare los recuentos marcados y no marcados en cualquier cambio.
input[type="submit"] también $("#formid").on("change", ".required", function(event) { let allCheckboxes = $(event.delegateTarget) .find(".required").filter('input[type="checkbox"]'); let checkedCount = allCheckboxes.filter(":checked").length; $(event.delegateTarget).find(".toggle-disabled") .prop("disabled", allCheckboxes.length != checkedCount); }).trigger("change"); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="formid" action="#"> <p> <label> <input type="checkbox" class="filled-in box required" name="item" /> <span>Filled in</span> </label> </p> <p> <label> <input type="checkbox" class="filled-in box required" name="item" /> <span>Filled in</span> </label> </p> <p> <label> <input type="checkbox" class="filled-in box required" name="item" /> <span>Filled in</span> </label> </p> <p> <button type="button" class="toggle-disabled" disabled>Submit</button> </p> </form>Alternativa
$("#formid").on("change", ".required", function(event) { let notAllChecked = !!$(event.delegateTarget) .find(".required").filter('input[type="checkbox"]:not(:checked)').length; $(event.delegateTarget).find(".toggle-disabled") .prop("disabled", notAllChecked); }).trigger("change"); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="formid" action="#"> <p> <label> <input type="checkbox" class="filled-in box required" name="item" /> <span>Filled in</span> </label> </p> <p> <label> <input type="checkbox" class="filled-in box required" name="item" /> <span>Filled in</span> </label> </p> <p> <label> <input type="checkbox" class="filled-in box required" name="item" /> <span>Filled in</span> </label> </p> <p> <button type="button" class="toggle-disabled" disabled>Submit</button> </p> </form>