Question

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?

Comments

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?

---

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

saludos y gracias por responder

Answer 1

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

Answer 2

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.

Answer 3

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