Entonces, creé una tabla con casillas de verificación y quiero que el usuario marque al menos dos opciones para habilitar el botón para enviar las respuestas.
HTML
<body> <h1>Checked two options</h1> <br /> <p>What are some of your favorite dishes?</p> <table id="tblFoods"> <tr> <td><input id="chkPizza" type="checkbox" /><label for="chkPizza">Pizza</label></td> </tr> <tr> <td><input id="chkLasagna" type="checkbox" /><label for="chkLasagna">Lasagna</label></td> </tr> <tr> <td><input id="chkPasta" type="checkbox" /><label for="chkPasta">Pasta</label></td> </tr> <tr> <td><input id="chkBarbecue" type="checkbox" /><label for="chkBarbecue">Barbecue</label></td> </tr> </table> <br /> <input type="submit" id="mybtn" disabled value="Submit" onclick="EnableButton()" /> </body>Y tengo esta función, pero no funciona. Estoy usando un bucle para contar cuántas opciones ha verificado el usuario, pero no funciona.
JS
function EnableButton() { var tblFoods = document.getElementById("tblFoods"); var checkeds = tblFoods.getElementsByTagName("INPUT"); var counter = 0; for (let i = 0; i < marcados.length; i++) { if (checkeds[i].checked) { counter++; } } if (counter >= 2) { document.getElementById("mybtn").disabled = false; } else { document.getElementById("mybtn").disabled = true; } }¿Qué estoy haciendo mal?
Debe verificar si el botón debe habilitarse cuando se verifican las entradas, no cuando se hace clic en el botón.
La forma más agradable y concisa de hacer esto es:
const table = document.querySelector('#tblFoods'); table.addEventListener('change', () => { const checkedCount = [...table.querySelectorAll('input')].reduce((a, input) => a + input.checked, 0); document.getElementById("mybtn").disabled = checkedCount < 2; }); <h1>Checked two options</h1> <br/> <p>What are some of your favorite dishes?</p> <table id="tblFoods"> <tr> <td><input id="chkPizza" type="checkbox" /><label for="chkPizza">Pizza</label></td> </tr> <tr> <td><input id="chkLasagna" type="checkbox" /><label for="chkLasagna">Lasagna</label></td> </tr> <tr> <td><input id="chkPasta" type="checkbox" /><label for="chkPasta">Pasta</label></td> </tr> <tr> <td><input id="chkBarbecue" type="checkbox" /><label for="chkBarbecue">Barbecue</label></td> </tr> </table> <br /> <input type="submit" id="mybtn" disabled value="Submit" />Su código original, modificado, también funciona, pero es bastante detallado en comparación.
document.querySelector('#tblFoods').addEventListener('change', () => { var tblFoods = document.getElementById("tblFoods"); var checkeds = tblFoods.getElementsByTagName("INPUT"); var counter = 0; for(let i =0; i < checkeds.length;i++) { if(checkeds[i].checked) { counter++; } } if(counter>=2) { document.getElementById("mybtn").disabled = false; } else { document.getElementById("mybtn").disabled = true; } }); <h1>Checked two options</h1> <br/> <p>What are some of your favorite dishes?</p> <table id="tblFoods"> <tr> <td><input id="chkPizza" type="checkbox" /><label for="chkPizza">Pizza</label></td> </tr> <tr> <td><input id="chkLasagna" type="checkbox" /><label for="chkLasagna">Lasagna</label></td> </tr> <tr> <td><input id="chkPasta" type="checkbox" /><label for="chkPasta">Pasta</label></td> </tr> <tr> <td><input id="chkBarbecue" type="checkbox" /><label for="chkBarbecue">Barbecue</label></td> </tr> </table> <br /> <input type="submit" id="mybtn" disabled value="Submit" />Debe manejar los cambios en cada elemento de la casilla de verificación por separado y, finalmente, el botón Enviar. Puedes hacer algo como lo siguiente.
Nota: vea cómo se utilizan los controladores de eventos onClick en cada elemento de input type checkbox y en el botón de submit por separado. Además, tenemos que restablecer todo al enviar.
Una posible solución:
let checks_counter = 0; function EnableButton(checkbox) { if (checkbox.checked) { checks_counter++; } if (checks_counter > 2) { document.getElementById("mybtn").disabled = false; } else { document.getElementById("mybtn").disabled = true; } } function submitHandler() { var elements = document.getElementsByTagName('input'); //unchecking everything for (var i = elements.length; i--;) { if (elements[i].type == 'checkbox') { elements[i].checked = false; } } //resetting the counter and disabling the button checks_counter = 0; document.getElementById("mybtn").disabled = true; } <body> <h1>Checked two options</h1> <br/> <p>What are some of your favorite dishes?</p> <table id="tblFoods"> <tr> <td><input id="chkPizza" type="checkbox" onChange="EnableButton(this)" /><label for="chkPizza">Pizza</label></td> </tr> <tr> <td><input id="chkLasagna" type="checkbox" onChange="EnableButton(this)" /><label for="chkLasagna">Lasagna</label></td> </tr> <tr> <td><input id="chkPasta" type="checkbox" onChange="EnableButton(this)" /><label for="chkPasta">Pasta</label></td> </tr> <tr> <td><input id="chkBarbecue" type="checkbox" onChange="EnableButton(this)" /><label for="chkBarbecue">Barbecue</label></td> </tr> </table> <br /> <input type="submit" id="mybtn" disabled value="Submit" onclick="submitHandler()" /> </body>Debe llamar a su función Enable cuando marque las casillas. Aquí hay un ejemplo práctico: https://codesandbox.io/s/proud-architecture-ou5l2?file=/src/index.js
usando su código existente:
var tblFoods = document.getElementById("tblFoods"); var checkeds = tblFoods.querySelectorAll("input"); const btn = document.getElementById("mybtn"); function enableButton() { var counter = 0; for (let i = 0; i < checkeds.length; i++) { if (checkeds[i].checked) { counter++; } } if (counter >= 2) { btn.disabled = false; } else { btn.disabled = true; } } const handleClick = () => { enableButton(); // do whatever else you need in here }; checkeds.forEach((box) => box.addEventListener("click", handleClick));