<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label><br>digamos que tenemos este código, ¿puedo impedir que el usuario elija bicicleta y barco juntos usando javascript o cualquier otra cosa?
He probado este código javascript para limitar las opciones.
$(document).ready(function () { $("input[name='value3']").change(function () { var maxAllowed = 2; var cnt = $("input[name='value3']:checked").length; if (cnt > maxAllowed) { $(this).prop("checked", ""); alert('You can select maximum ' + maxAllowed + ' options!!'); } }); });pero todavía necesito limitar más las opciones y evitar elegir una opción específica junto con una específica
Puede anular la selección de todas las demás casillas de verificación cuando el usuario selecciona una casilla de verificación escuchando el evento de change :
const checkboxes = document.querySelectorAll('input[type="checkbox"]'); checkboxes.forEach(e => e.addEventListener('change', () => checkboxes.forEach(f => f != e ? f.checked = false : ''))) <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label><br>Sin embargo, la mejor opción es hacer que las entradas sean botones de radio en lugar de casillas de verificación.
<input type="radio" id="vehicle1" name="vehicle" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="radio" id="vehicle2" name="vehicle" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="radio" id="vehicle3" name="vehicle" value="Boat"> <label for="vehicle3"> I have a boat</label><br>