[SOLUCIONADO] Impedir selección de checkbox

diegoguerrero · #1 (**permalink**) 13/02/2016, 03:23

Hola!

Tengo que hacer un formulario en el que hay unos 20 checkboxes y quiero que solo se puedan seleccionar dos, es decir, que cuando se envíe el formulario detecte si hay dos seleccionados. Si hay dos debe seguir corriendo el código y, si no, volver y soltar un aviso. ¿Cómo hacerlo? Gracias!

Tengo esto:

Código HTML:

Ver original<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Examen sobre Luis Cernuda</title>
<link rel="stylesheet" href="Estilos/Estilos.css">
</head>
<body>
<div class="Cabecera" id="Cabecera">
    <div class="Titulo">Luis Cernuda</div>
    <div class="Subtitulo">¿Qué sabes de él?</div>
</div>
<div class="Cuerpo">
    <div class="TextoDescriptivo">Esta es una prueba para comprobar cuánto sabéis acerca de Luis Cernuda. Para comenzar, seleccionaos los dos integrantes.</div>
    <form action="ComienzoPrueba.php" method="get">
        <div class="Campo">
            <label class="InputLabel">Integrantes</label>
                <?php
                    // Incluyo la base datos
                    include ("ConexionBaseDatos.php");
                    // Traigo alumnos
                    $Query1 = "SELECT * FROM `Alumnos` ORDER BY NombreA1 ASC";
                    $MyQuery1 = $MyConnect->query($Query1);
                    while ($MyFetch1 = $MyQuery1->fetch_assoc()){
                        echo '<input type="checkbox" name="'.$MyFetch1['ID'].'">'.$MyFetch1['NombreN'].' '.$MyFetch1['NombreA1'].'<br>';
                    }
                ?>
        </div>
        <button class="BotonEnvio" type="submit">Empezar</button>
    </form>
</div>
</body>
</html>

IsaBelM · #2 (**permalink**) 13/02/2016, 06:20

Aquí tienes como hacerlo http://lineadecodigo.com/javascript/...on-javascript/

Alexis88 · #3 (**permalink**) 13/02/2016, 11:49

Y si tu aplicación va a ser utilizada en navegadores que soporten HTML5, puedes utilizar selectores CSS avanzados:

Código Javascript:

Ver originaldocument.querySelectorAll("[type=checkbox]:checked").length)

Y si no hubiera otros elementos de marcado excepto los checkbox, con esto te basta:

Código Javascript:

Ver originaldocument.querySelectorAll(":checked").length)

La pseudoclase :checked representa a elementos como checkbox, radiobutton y opciones de combo que estén marcados, por lo que si tienes a más elementos de marcado que los checkbox, será necesario que utilices la primera forma.

Un saludo