entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Elegir solo un checkbox

hola a todos

Alguien que me pueda ayudar? tengo estos checkboxs

<td><div class="checkbox-inline"><label><input type="checkbox" id="question1"><i class="fa fa-square-o"></i></label></div></td>
<td><div class="checkbox-inline"><label><input type="checkbox" id="question2"><i class="fa fa-square-o"></i></label></div></td>
<td><div class="checkbox-inline"><label><input type="checkbox" value="na" id="question3"><i class="fa fa-square-o"></i></label></div>

mi duda es, Cómo le puedo hacer para que solo me deje seleccionar uno?

alguna idea?

carlossevi comentado Nov 18, 2015

Dos preguntas antes de lanzarme a responder: ¿Por qué no utilizar un radio button? En caso de que no sea posible ¿Utilizas algún framework de JS?

rach comentado Nov 19, 2015

por el diseño, necesito un checkbox, y no ultilizo framework de js

saludos y gracias por responder

3 Respuestas

1voto

bl4z3r Puntos16800

En vez de utilizar checkboxes, utilizaría radio buttons. Trata de hacer un acercamiento por ese lado, posiblemente se solucione tu problema.

3votos

Leonardo-Tadei Puntos223480

Tal y cómo plantena @carlossevi y @bl4z3r , el com[ponente HTML correcto para hacer autoexclusiones es el input de tipo radio.

Basta que todos tengan el mismo name para que se autoexcluyan.

Si tu problema fuera de de aspecto visual, que te hace falta por pautas del diseño gráfico que se vean tildes sobre un cuadrado, podrías decorar el radio button con CSS para que tenga el aspecto que te hace falta.

Saludos!

PD: también se puede simular algo así con JavaScript, pero además de ser más complejo e innecesario, puede que en máquinas lentas puedas llegar a seleccionar 2 opciones a la vez.

Leonardo-Tadei comentado Nov 22, 2015

Hola @bl4z3r,

por otra cuestión, me crucé con el CSS que hace que los radio se vean como checkbox, de forma tal de puedas usarlos y se vean como te hace falta:

input[type="radio"] {
    -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
    -moz-appearance: checkbox;    /* Firefox */
    -ms-appearance: checkbox;     /* IExplorer */
}

Hay otras formas, pero esta es la más simple.

Saludos cordiales

bl4z3r comentado Nov 22, 2015

@Leonardo-Tadei es esa la solucion que yo conocia. Es la forma correcta de hacer un cambio en el parte visual de un componente HTML.

1voto

MitsuGami Puntos8010

Solo crea una función que compruebe si ya al menos un checkbox marcado.

function alreadyChecked() {
    var checkedCount = 0;
    var checkboxes = document.querySelectorAll('table tbody tr td > input');
    [].forEach.call(checkboxes, function(checkbox) {
    if(checkbox.checked === true) {
            checkedCount++;
    }
    });
    return checkedCount > 1;
}

Y cuando se marque un checkbox:

var checkboxes = document.querySelectorAll('input[type="checkbox"]');
[].forEach.call(checkboxes, function(checkbox) {
    checkbox.addEventListener('change', function() {
        if(checkbox.checked && alreadyChecked()) {
            // si ya hay checkboxes marcados, cuando se marque uno nuevo
            // se desmarcará instantáneamente, por lo que pareciera que
            // ni siquiera se pudo marcar
            checkbox.checked = false;
        }
    });       
});

SaraEscobar comentado Ago 1

Hola!! Me gustó la idea de crear una funcion de seleccion pero, no recuerdo muy bien como llamarla en el jsp para los checks.. me podías dar un ejemplo? Gracias :)

Peter comentado Ago 2

@SaraEscobar por favor abre otra pregunta con tu problema.

Saludos.

SaraEscobar comentado Ago 2

De acuerdo, lo siento soy nueva aquí :)

Por favor, accede o regístrate para responder a esta pregunta.

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Otras Preguntas y Respuestas


Actividad Reciente

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta