[SOLUCIONADO] Desactivar checkboxes cuando se clickean 5 de ellos

jiten · #1 (**permalink**) 19/02/2014, 01:27

Amigos :

Tengo un formulario con 20 checkboxes cuyos nombres e ids son: atrib_1, atrib_2, atrib_3,...atrib_20

Necesito hacer que cuando el cliente haga click en 5 de ellos (cualquiera que sea) se desactiven todos los demás que no fueron elegidos. Y en caso de que esten los 5 elegidos pero se deseleccione uno de los que etsab marcados, entonces se vuelven a habilitar todos los checkboxes de nuevo para que pueda elegir entre esos.

Cómo puedo hacer esto ?

America|UNK · #2 (**permalink**) 19/02/2014, 03:27

Hola, intenta esta forma:

Código Javascript:

Ver original<input type="checkbox" id="atrib_1" /><br />
<input type="checkbox" id="atrib_2" /><br />
<input type="checkbox" id="atrib_3" /><br />
<input type="checkbox" id="atrib_4" /><br />
<input type="checkbox" id="atrib_5" /><br />
<input type="checkbox" id="atrib_6" /><br />
<input type="checkbox" id="atrib_7" /><br />
<input type="checkbox" id="atrib_8" /><br />
<input type="checkbox" id="atrib_20" /><br />
 
<script>
 
var checkboxes = function(fn){
    var i = 0, box
    while(i <= 20) (box = document.getElementById("atrib_" + i++), box && fn.apply(box,[]))
};
 
checkboxes(function(){
    this.onclick = function(){
        var count = 0
        checkboxes(function(){
            this.checked && count++
        })
        checkboxes(function(){
            !this.checked && count >= 5 ? this.disabled = !0 : this.disabled = !1
        })
    }
});
 
 
</script>

beinat · #3 (**permalink**) 19/02/2014, 10:23

Mi propuesta es la siguiente:

Cada vez que toques a un boton llamar a una funcion en javaScript y que este compruebe las que estan seleccionada si son igual a 5 desabilitar las demas sino habilitarlas, los id de los checkbox son los que tu as dicho, yo e probado creando una clase en todas igual llamada "check" para luego desde javaScript con document.getElementsByClassName poder coger todas quedando el codigo de esta manera:

Código Javascript:

Ver original<html>
<head>
<script type="text/javascript" >
 
 function prueba(){
  c=document.getElementsByClassName('check');
  count=0;
  for(i=0;i<c.length;i++){
 
   if(c[i].checked==1){count++;}
  }
 alert("En total hay: " + count + "seleccionados");
 if(count==5){
  alert("no se puede seleccionar mas!!")
  for(i=0;i<c.length;i++){
   if(c[i].checked==0){
    c[i].disabled=true; 
   } 
  }
 }
 else{
  for(i=0;i<c.length;i++){
   if(c[i].disabled=true){c[i].disabled=false;} 
   } 
 }
}
</script>
</head>
 <body>
  <input type="checkbox"  class="check" id="atrib_1" onclick="prueba()"/>uno<br />
  <input type="checkbox"  class="check" id="atrib_2" onclick="prueba()"/>dos<br />
  <input type="checkbox"  class="check" id="atrib_3" onclick="prueba()" />tres<br />
  <input type="checkbox"  class="check" id="atrib_4" onclick="prueba()"/>cuatro<br />
  <input type="checkbox" class="check" id="atrib_5" onclick="prueba()"/>cinco<br />
  <input type="checkbox" class="check" id="atrib_6" onclick="prueba()"/>seis<br />
  <input type="checkbox" class="check" id="atrib_7" onclick="prueba()"/>siete<br />
  <input type="checkbox" class="check" id="atrib_8" onclick="prueba()"/>ocho<br />
  <input type="checkbox" class="check" id="atrib_9" onclick="prueba()"/>nueve<br />
  <input type="checkbox" class="check" id="atrib_10" onclick="prueba()"/>diez<br />
  <input type="checkbox" class="check" id="atrib_11" onclick="prueba()"/>once<br />
  <input type="checkbox" class="check" id="atrib_12" onclick="prueba()"/>doce<br />
  <input type="checkbox" class="check" id="atrib_13" onclick="prueba()"/>trece<br />
  <input type="checkbox" class="check" id="atrib_14" onclick="prueba()"/>catorce<br />
  <input type="checkbox" class="check" id="atrib_15" onclick="prueba()"/>quince<br />
  <input type="checkbox" class="check" id="atrib_16" onclick="prueba()"/>dieciseis<br />
  <input type="checkbox" class="check" id="atrib_17" onclick="prueba()"/>diecisiete<br />
  <input type="checkbox" class="check" id="atrib_18" onclick="prueba()"/>dieciocho<br />
  <input type="checkbox" class="check" id="atrib_19" onclick="prueba()"/>diecinueve<br />
  <input type="checkbox" class="check" id="atrib_20" onclick="prueba()"/>veinte<br />
 
 </body>
</html>

creo que es una forma sencilla de hacerlo teniendo una base de conocimientos, no e probado con el codigo de America|UNK pero igual tambien funciona, yo te propongo para que tengas dos alternativas.

Espero haberte ayudado.

Un saludo!

jiten · #4 (**permalink**) 19/02/2014, 19:24

Cita:

Iniciado por America|UNK

Hola, intenta esta forma:

Código Javascript:

Ver original<input type="checkbox" id="atrib_1" /><br />
<input type="checkbox" id="atrib_2" /><br />
<input type="checkbox" id="atrib_3" /><br />
<input type="checkbox" id="atrib_4" /><br />
<input type="checkbox" id="atrib_5" /><br />
<input type="checkbox" id="atrib_6" /><br />
<input type="checkbox" id="atrib_7" /><br />
<input type="checkbox" id="atrib_8" /><br />
<input type="checkbox" id="atrib_20" /><br />
 
<script>
 
var checkboxes = function(fn){
    var i = 0, box
    while(i <= 20) (box = document.getElementById("atrib_" + i++), box && fn.apply(box,[]))
};
 
checkboxes(function(){
    this.onclick = function(){
        var count = 0
        checkboxes(function(){
            this.checked && count++
        })
        checkboxes(function(){
            !this.checked && count >= 5 ? this.disabled = !0 : this.disabled = !1
        })
    }
});
 
 
</script>

no funciona....

jiten · #5 (**permalink**) 19/02/2014, 19:33

Beinat muchas gracias ! genial solución !

America|UNK · #6 (**permalink**) 25/02/2014, 16:08

Es la forma más sencilla y limpia: http://jsfiddle.net/wZVanG/WncMf/, no se como lo estás usando, también puedes usar jQuery para ahorrar aún más código.