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?

3votos

carlossevi comentado

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?

0voto

rach comentado

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

saludos y gracias por responder

3 Respuestas

1voto

bl4z3r Puntos16850

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

5votos

Leonardo-Tadei Puntos227320

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.

3votos

Leonardo-Tadei comentado

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

0voto

bl4z3r comentado

@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;
        }
    });       
});

0voto

SaraEscobar comentado

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 :)

0voto

Peter comentado

@SaraEscobar por favor abre otra pregunta con tu problema.

Saludos.

1voto

SaraEscobar comentado

De acuerdo, lo siento soy nueva aquí :)

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

Otras Preguntas y Respuestas


...

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

Conecta