Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Desactivar checkboxes cuando se clickean 5 de ellos

Estas en el tema de Desactivar checkboxes cuando se clickean 5 de ellos en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/02/2014, 01:27
 
Fecha de Ingreso: febrero-2008
Mensajes: 409
Antigüedad: 14 años, 6 meses
Puntos: 2
Pregunta Desactivar checkboxes cuando se clickean 5 de ellos

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 ?
  #2 (permalink)  
Antiguo 19/02/2014, 03:27
Avatar de America|UNK  
Fecha de Ingreso: noviembre-2006
Ubicación: Piura - Perú
Mensajes: 582
Antigüedad: 15 años, 8 meses
Puntos: 56
Respuesta: Desactivar checkboxes cuando se clickean 5 de ellos

Hola, intenta esta forma:

Código Javascript:
Ver original
  1. <input type="checkbox" id="atrib_1" /><br />
  2. <input type="checkbox" id="atrib_2" /><br />
  3. <input type="checkbox" id="atrib_3" /><br />
  4. <input type="checkbox" id="atrib_4" /><br />
  5. <input type="checkbox" id="atrib_5" /><br />
  6. <input type="checkbox" id="atrib_6" /><br />
  7. <input type="checkbox" id="atrib_7" /><br />
  8. <input type="checkbox" id="atrib_8" /><br />
  9. <input type="checkbox" id="atrib_20" /><br />
  10.  
  11. <script>
  12.  
  13. var checkboxes = function(fn){
  14.     var i = 0, box
  15.     while(i <= 20) (box = document.getElementById("atrib_" + i++), box && fn.apply(box,[]))
  16. };
  17.  
  18. checkboxes(function(){
  19.     this.onclick = function(){
  20.         var count = 0
  21.         checkboxes(function(){
  22.             this.checked && count++
  23.         })
  24.         checkboxes(function(){
  25.             !this.checked && count >= 5 ? this.disabled = !0 : this.disabled = !1
  26.         })
  27.     }
  28. });
  29.  
  30.  
  31. </script>
__________________
/* El que atiende, entiende..., el que entiende, aprende!.
Desarrollo Web Freelance, Contactar */
  #3 (permalink)  
Antiguo 19/02/2014, 10:23
 
Fecha de Ingreso: abril-2008
Mensajes: 64
Antigüedad: 14 años, 3 meses
Puntos: 2
Respuesta: Desactivar checkboxes cuando se clickean 5 de ellos

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
  1. <html>
  2. <head>
  3. <script type="text/javascript" >
  4.  
  5.  function prueba(){
  6.   c=document.getElementsByClassName('check');
  7.   count=0;
  8.   for(i=0;i<c.length;i++){
  9.  
  10.    if(c[i].checked==1){count++;}
  11.   }
  12.  alert("En total hay: " + count + "seleccionados");
  13.  if(count==5){
  14.   alert("no se puede seleccionar mas!!")
  15.   for(i=0;i<c.length;i++){
  16.    if(c[i].checked==0){
  17.     c[i].disabled=true;
  18.    }
  19.   }
  20.  }
  21.  else{
  22.   for(i=0;i<c.length;i++){
  23.    if(c[i].disabled=true){c[i].disabled=false;}
  24.    }
  25.  }
  26. }
  27. </script>
  28. </head>
  29.  <body>
  30.   <input type="checkbox"  class="check" id="atrib_1" onclick="prueba()"/>uno<br />
  31.   <input type="checkbox"  class="check" id="atrib_2" onclick="prueba()"/>dos<br />
  32.   <input type="checkbox"  class="check" id="atrib_3" onclick="prueba()" />tres<br />
  33.   <input type="checkbox"  class="check" id="atrib_4" onclick="prueba()"/>cuatro<br />
  34.   <input type="checkbox" class="check" id="atrib_5" onclick="prueba()"/>cinco<br />
  35.   <input type="checkbox" class="check" id="atrib_6" onclick="prueba()"/>seis<br />
  36.   <input type="checkbox" class="check" id="atrib_7" onclick="prueba()"/>siete<br />
  37.   <input type="checkbox" class="check" id="atrib_8" onclick="prueba()"/>ocho<br />
  38.   <input type="checkbox" class="check" id="atrib_9" onclick="prueba()"/>nueve<br />
  39.   <input type="checkbox" class="check" id="atrib_10" onclick="prueba()"/>diez<br />
  40.   <input type="checkbox" class="check" id="atrib_11" onclick="prueba()"/>once<br />
  41.   <input type="checkbox" class="check" id="atrib_12" onclick="prueba()"/>doce<br />
  42.   <input type="checkbox" class="check" id="atrib_13" onclick="prueba()"/>trece<br />
  43.   <input type="checkbox" class="check" id="atrib_14" onclick="prueba()"/>catorce<br />
  44.   <input type="checkbox" class="check" id="atrib_15" onclick="prueba()"/>quince<br />
  45.   <input type="checkbox" class="check" id="atrib_16" onclick="prueba()"/>dieciseis<br />
  46.   <input type="checkbox" class="check" id="atrib_17" onclick="prueba()"/>diecisiete<br />
  47.   <input type="checkbox" class="check" id="atrib_18" onclick="prueba()"/>dieciocho<br />
  48.   <input type="checkbox" class="check" id="atrib_19" onclick="prueba()"/>diecinueve<br />
  49.   <input type="checkbox" class="check" id="atrib_20" onclick="prueba()"/>veinte<br />
  50.  
  51.  </body>
  52. </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!
  #4 (permalink)  
Antiguo 19/02/2014, 19:24
 
Fecha de Ingreso: febrero-2008
Mensajes: 409
Antigüedad: 14 años, 6 meses
Puntos: 2
Respuesta: Desactivar checkboxes cuando se clickean 5 de ellos

Cita:
Iniciado por America|UNK Ver Mensaje
Hola, intenta esta forma:

Código Javascript:
Ver original
  1. <input type="checkbox" id="atrib_1" /><br />
  2. <input type="checkbox" id="atrib_2" /><br />
  3. <input type="checkbox" id="atrib_3" /><br />
  4. <input type="checkbox" id="atrib_4" /><br />
  5. <input type="checkbox" id="atrib_5" /><br />
  6. <input type="checkbox" id="atrib_6" /><br />
  7. <input type="checkbox" id="atrib_7" /><br />
  8. <input type="checkbox" id="atrib_8" /><br />
  9. <input type="checkbox" id="atrib_20" /><br />
  10.  
  11. <script>
  12.  
  13. var checkboxes = function(fn){
  14.     var i = 0, box
  15.     while(i <= 20) (box = document.getElementById("atrib_" + i++), box && fn.apply(box,[]))
  16. };
  17.  
  18. checkboxes(function(){
  19.     this.onclick = function(){
  20.         var count = 0
  21.         checkboxes(function(){
  22.             this.checked && count++
  23.         })
  24.         checkboxes(function(){
  25.             !this.checked && count >= 5 ? this.disabled = !0 : this.disabled = !1
  26.         })
  27.     }
  28. });
  29.  
  30.  
  31. </script>
no funciona....
  #5 (permalink)  
Antiguo 19/02/2014, 19:33
 
Fecha de Ingreso: febrero-2008
Mensajes: 409
Antigüedad: 14 años, 6 meses
Puntos: 2
Respuesta: Desactivar checkboxes cuando se clickean 5 de ellos

Beinat muchas gracias ! genial solución !
  #6 (permalink)  
Antiguo 25/02/2014, 16:08
Avatar de America|UNK  
Fecha de Ingreso: noviembre-2006
Ubicación: Piura - Perú
Mensajes: 582
Antigüedad: 15 años, 8 meses
Puntos: 56
Respuesta: Desactivar checkboxes cuando se clickean 5 de ellos

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.
__________________
/* El que atiende, entiende..., el que entiende, aprende!.
Desarrollo Web Freelance, Contactar */

Etiquetas: checkboxes, desactivar, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:44.