Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Boton activo al checkear un checkbox

Estas en el tema de Boton activo al checkear un checkbox en el foro de Frameworks JS en Foros del Web. Hola chicos, tengo una lista de checkbox que se contruyen dinamicamente, junto a cada linea tambien un boton: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original while($espacios=fetch_array($esp)){ ...
  #1 (permalink)  
Antiguo 30/05/2012, 04:50
Avatar de Lucieta86  
Fecha de Ingreso: noviembre-2010
Mensajes: 45
Antigüedad: 13 años, 3 meses
Puntos: 1
Boton activo al checkear un checkbox

Hola chicos, tengo una lista de checkbox que se contruyen dinamicamente, junto a cada linea tambien un boton:

Código HTML:
Ver original
  1. while($espacios=fetch_array($esp)){
  2. ?>
  3. <div style="background:#E0F2F7">
  4. <input type="checkbox" name="aulaRes" class="aulaRes" id="aulaRes" value="<?php echo $espacios["ALIAS"]; ?>"/><?php echo $espacios["ALIAS"]." - ".htmlentities($espacios["OBSERVACIONES"])." "; ?>
  5. <button id="botReserva" class="botReserva"> Reservar</button>
  6. </div>
  7. <br>
  8.  
  9. <?php
  10. }
  11. ?>


El caso es que quiero que se active solo aquel boton que esta checkeada su opcion, y tengo algo echo, en este caso, seleccione la opcion que sea, siempre se activa el primer boton, alguna idea para que SOLO SE ACTIVE aquellos botónes que esta seleccionado el checkbox?

Código HTML:
Ver original
  1. $(".aulaRes").click(function activarBoton(){
  2.         var aux=$(".aulaRes").is(':checked');
  3.         //alert(aux);
  4.             if(aux==true){
  5.                 $("#botReserva").button({disabled: false });
  6.             }else{
  7.                 $("#botReserva").button({disabled: true });
  8.             }
  9.     });


Gracias
  #2 (permalink)  
Antiguo 30/05/2012, 08:22
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años
Puntos: 192
Respuesta: Boton activo al checkear un checkbox

Yo haría algo así:
Código Javascript:
Ver original
  1. $(".aulaRes").click(function activarBoton(){
  2.     var $elem = $(this);
  3.     $elem.siblings('button').attr('disabled',!$elem.is(':checked'));
  4. });

Además deberías hacer una parte con PHP al cargar los inputs. Si el input está chequeado, el botón estará habilitado pero por defecto todos los botones deberían estar inhabilitados. Esto lo podés hacer, como te dije, por PHP.

Además, tené en cuenta que en tu ciclo estás repitiendo las ID y los name de los inputs. Esto te va a traer problemas.
__________________
nahueljose.com.ar
  #3 (permalink)  
Antiguo 31/05/2012, 03:02
Avatar de Lucieta86  
Fecha de Ingreso: noviembre-2010
Mensajes: 45
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: Boton activo al checkear un checkbox

Hola, gracias por tu respuesta.

He probado el código que me has pasado, y no funciona. Con el mio, deja activo el primero, pero no el resto... se checkee, el que se checkee...

No se a que te refieres con un código con php... lo que me comentas que haga, es lo que estoy intentando resolver con jquery.

El tema del id y name repetido... por ahora no necesito esos valores, ya que recogo el value de los chekeados, asi que por ahora lo voy a dejar asi.

Alguna idea nueva? PORFA!!
  #4 (permalink)  
Antiguo 31/05/2012, 07:16
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años
Puntos: 192
Respuesta: Boton activo al checkear un checkbox

Cita:
Iniciado por Lucieta86 Ver Mensaje
He probado el código que me has pasado, y no funciona.
Si funciona (demo http://jsbin.com/eyinuv/). Tal vez si dieras más código te podríamos ayudar mejor. Lo ideal sería que des el HTML generado por tu PHP.

Cita:
Iniciado por Lucieta86 Ver Mensaje
No se a que te refieres con un código con php... lo que me comentas que haga, es lo que estoy intentando resolver con jquery.
No, lo que te decía es que los <button> deberían tener un estado inicial. Deberían estar todos disabled, a menos que algun checkbox esté tildado por defecto.
__________________
nahueljose.com.ar
  #5 (permalink)  
Antiguo 01/06/2012, 02:54
Avatar de Lucieta86  
Fecha de Ingreso: noviembre-2010
Mensajes: 45
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: Boton activo al checkear un checkbox

Uff... al ver lo que me habias pasado, me habia echo ilusiones.... Sigen sin activarse, y no lo entiendo.

Te pego el código entero de la página:

Código Javascript:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml"><head>
  3. <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
  4. <title>APLICACIÓN de RESERVAS de la ETSINF (versión jquery)</title>
  5.  
  6.     <link type="text/css" href="css/jquery.mcdropdown.css" rel="stylesheet" media="all" />
  7.     <!--<script type="text/javascript" src="js/jquery.bgiframe.js"></script>
  8.     <script type="text/javascript" src="js/jquery.mcdropdown.js"></script>-->
  9.  
  10. <?php
  11. require "config.php";
  12. require "connect_db.php";
  13. require "functions.php";
  14. ?>
  15.  
  16. <script type="text/javascript">
  17.  
  18. $(function(){
  19.     $.ajaxSetup({cache:false});
  20.     // Estilo del botón Buscar
  21.     $(".botReserva").button();
  22.    
  23.    
  24.     $("#botResSel").button();
  25.    
  26.     $( "#botConfig" ).button({
  27.         icons: {
  28.             primary: "ui-icon-gear",
  29.             secondary: "ui-icon-triangle-1-s"
  30.         }
  31.     });
  32.  
  33.     $("#combobox" ).combobox({
  34.         text: false,
  35.         icons: {
  36.             primary: "ui-icon-check",
  37.             secondary: "ui-icon-triangle-1-s"
  38.         },
  39.        
  40.     });
  41.    
  42.     //Activar el botón de reserva cuando se seleccione un aula
  43.     $(".aulaRes").click(function activarBoton(){
  44.       var $elem = $(this);
  45.       $elem.siblings('button').attr('disabled',!$elem.is(':checked'));
  46.   });
  47.  
  48.    
  49.     //Para que carge el script del formulario
  50.     $("#botReserva, #botResSel").click(function(e){
  51.         e.preventDefault();
  52.        
  53.         var fIni= $("#varFIni").val();
  54.         console.log ("Fecha Inicio infobusqueda.php" + fIni);
  55.         var fFin= $("#varFFin").val();
  56.         var hIni= $("#varHini").val();
  57.         var hFin=$("#varHfin").val();
  58.         var seleAulas = new Array();
  59.        
  60.         $("input[name='aulaRes']:checked").each(function(){
  61.             seleAulas.push($(this).val());
  62.         });
  63.            
  64.         param="fIni="+fIni+"&fFin="+fFin+"&seleAulas="+seleAulas+"&hIni="+hIni+"&hFin="+hFin;  
  65.        
  66.         console.log ("param para formularioReserva.php: "+ param);
  67.         $.ajax({
  68.             type: "POST",
  69.             url: "formularioReserva.php",
  70.             data: param,
  71.             success: function(datos){
  72.                 $("#cargarForm").html(datos);
  73.                
  74.             }
  75.         });//ajax
  76.         return false;
  77.     });//click
  78.  
  79.    
  80. });
  81. </script>
  82.  
  83. <style type="text/css">
  84. body{ font: 62.5% "Trebuchet MS", sans-serif; }
  85. #margen{margin:35px; }
  86. .formEspacios div{margin-bottom: 1px; /* esto los separara un poco */}
  87. #toolbar {padding: 10px 4px;}
  88. .error{ color: red; font-weight: bold; font-size:11px; }
  89.  
  90. </style>
  91.  
  92. </head>
  93. <body>
  94.  
  95. <?php
  96. //Recogemos los valores de las variables que nos manda index.php
  97. $fechaInicio=$_REQUEST["fechaIni"];
  98. $fechaFin=$_REQUEST["fechaFin"];
  99. $horaInicio=$_REQUEST["horaIni"];
  100. $horaFin=$_REQUEST["horaFin"];
  101. $opcPeriodica=$_REQUEST["periodica"];//Si esta checkeada, su valor sera "Periodica", si no el valor sera "no"
  102. $opcSelEspacios=$_REQUEST["selEspacios"];//Lista de espacios, separados por una coma
  103. $opcSelDias=$_REQUEST["selDias"];
  104. $opcEdif=$_REQUEST["edif"];//Solo tendra un edificio.
  105.  
  106. //Pasar el estring de dias seleccionados en la periodicidad a array
  107. $dia=explode(',', $opcSelDias);
  108. $opcEspacios=explode(',', $opcSelEspacios);
  109.  
  110. //pasar los dias de la semana a valor numerico
  111. $diaNumerico="";
  112. for($aux=0; $aux<count($dia); $aux++){
  113.     if($aux==0){
  114.         switch($dia[$aux]){
  115.             case "Lunes": {$diaNumerico="1"; break;}
  116.             case "Martes": {$diaNumerico="2"; break;}
  117.             case "Miercoles": {$diaNumerico="3"; break;}
  118.             case "Jueves": {$diaNumerico="4"; break;}
  119.             default: {$diaNumerico="5"; break;}
  120.         }
  121.     }
  122.     else{
  123.         switch($dia[$aux]){
  124.             case "Lunes": {$diaNumerico=$diaNumerico.",1"; break;}
  125.             case "Martes": {$diaNumerico=$diaNumerico.",2"; break;}
  126.             case "Miercoles": {$diaNumerico=$diaNumerico.",3"; break;}
  127.             case "Jueves": {$diaNumerico=$diaNumerico.",4"; break;}
  128.             default: {$diaNumerico=$diaNumerico.",5"; break;}
  129.         }
  130.     }
  131. }
  132.  
  133.  
  134. //Si no esta seleccionada la periodicidad, deja la variable $diaNumerico vacia
  135. if(strcmp($opcPeriodica, "Periodica")!=0) $diaNumerico="";
  136. //Si esta seleccionada la opcion de "Todos los edificios", deja la variable $opcEdif vacia
  137. if(strcmp($opcEdif, "TodosEdif")==0) $opcEdif="";
  138.  
  139. //FECHAS SELECCIONADAS EN FORMATO PARA BDA
  140. //Para pasar el formato de la fecha al mismo que el de la base de datos
  141. $auxFini=explode('/', $fechaInicio);
  142. $auxFfin=explode('/', $fechaFin);
  143. $FeIniBD=$auxFini[2]."-".$auxFini[1]."-".$auxFini[0];
  144. $FeFinBD=$auxFfin[2]."-".$auxFfin[1]."-".$auxFfin[0];
  145.  
  146. ?>
  147.  
  148. <form id="mostrarAulas">
  149.  
  150. <!--Botones iniciales-->
  151. <span id="toolbar" class="ui-widget-header ui-corner-all">
  152.    
  153. <select id="combobox">
  154.         <option value="Todos">Todos</option>
  155.         <option value="Nada">Nada</option>
  156. </select>
  157.     <button id="botResSel">Reservar selecci&oacute;n</button>
  158.     <button id="botConfig">Configuraci&oacute;n</button>  
  159.      
  160. </span>
  161.  
  162.  
  163. <label> <h2>Espacios Disponibles </h2>
  164. <h4>(Criterios de b&uacute;squeda: Fecha Inicio: <?php echo $fechaInicio;?>, Fecha Fin: <?php echo $fechaFin;?>, Hora Inicio: <?php echo $horaInicio;?>, Hora Fin: <?php echo $horaFin;?>,</br> Tipo Espacio:
  165. <?php
  166. //Para mostrar los espacios seleccionados
  167. for($aux=0; $aux<count($opcEspacios); $aux++){
  168.     if($aux==0) echo $opcEspacios[$aux];
  169.     else echo " - ".$opcEspacios[$aux];
  170.     }
  171. ?>, Tipo Edificio: <?php echo $opcEdif;?>
  172.  
  173. <?php
  174. //Para incluir si hay periodicidad
  175. if(strcmp($opcPeriodica, "Periodica")==0){ echo ", Repetir cada: ";
  176.      for($aux=0; $aux<count($dia); $aux++){
  177.         if($aux==0) echo $dia[$aux];
  178.         else echo " - ".$dia[$aux];
  179.         }
  180.         echo " )";
  181.      }
  182. else echo ")";
  183.  
  184. ?>
  185.  
  186. </h4></label>
  187.  
  188. <div id="margen" >
  189. <?php
  190. $sql="execute proc_resweb_espacios_disponibles '".$FeIniBD."','".$FeFinBD."','".$horaInicio."','".$horaFin."','".$diaNumerico."','''".$opcEspacios[0]."'',''".$opcEspacios[2]."'',''".$opcEspacios[1]."''','".$opcEdif."'";
  191.    
  192. $esp=db_query($database_name, $sql);
  193. while($espacios=fetch_array($esp)){
  194. ?>
  195. <div style="background:#E0F2F7">
  196. <input type="checkbox" name="aulaRes" class="aulaRes" id="aulaRes" value="<?php echo $espacios["ALIAS"]; ?>"/><?php echo $espacios["ALIAS"]." - ".htmlentities($espacios["OBSERVACIONES"])." "; ?>
  197. <button id="botReserva" class="botReserva" disabled="disabled"> Reservar</button>
  198. </div>
  199. <br>
  200.  
  201. <?php
  202. }
  203. ?>
  204.  
  205.  
  206.  
  207. <!--CAMPOS OCULTOS PARA PASAR LOS DATOS AL SCRIPT DEL FORMULARIO:-->
  208. <input type="hidden" id="varFIni" value="<?php echo $fechaInicio;?>">
  209. <input type="hidden" id="varFFin" value="<?php echo $fechaFin;?>">
  210. <input type="hidden" id="varHini" value="<?php echo $horaInicio;?>">
  211. <input type="hidden" id="varHfin" value="<?php echo $horaFin;?>">
  212.  
  213.  
  214. </form>
  215. </div>
  216. <!--Este div, carga el forumlario-->
  217. <div id="cargarForm"></div>
  218.  
  219. </body>
  220. </html>


Gracias por todo de nuevo.
  #6 (permalink)  
Antiguo 01/06/2012, 02:59
Avatar de Lucieta86  
Fecha de Ingreso: noviembre-2010
Mensajes: 45
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: Boton activo al checkear un checkbox

Haciendo pruebas, me he dado cuenta de que si le quito el estilo del jquery al boton:

$(".botReserva").button();

Efectivamente, este funciona como quiero. Pero necesito que tenga ese estilo...

Gracias por la ayuda
  #7 (permalink)  
Antiguo 01/06/2012, 07:15
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años
Puntos: 192
Respuesta: Boton activo al checkear un checkbox

Desconozco que es .button(). Un plugin que usás? ¿Qué estilo debe tener el botón? ¿No se puede lograr con CSS?

Si el plugin ese estiliza el botón de alguna forma especial, lo más probable es que reemplace el HTML de alguna forma. Supongo que podés recurrir a la documentación para ver si es posible inhabilitar y habilitar el botón en forma dinámica.
__________________
nahueljose.com.ar
  #8 (permalink)  
Antiguo 01/06/2012, 09:17
Avatar de quike88  
Fecha de Ingreso: agosto-2008
Mensajes: 471
Antigüedad: 15 años, 7 meses
Puntos: 87
Respuesta: Boton activo al checkear un checkbox

Cita:
Iniciado por Naahuel Ver Mensaje
Desconozco que es .button().
Es un widget de JQuery UI que efectivamente modifica el HTML.

Lucieta86, Modificando esta linea te debería funcionar:

Código Javascript:
Ver original
  1. $elem.siblings('button').button({ disabled:!$elem.is(':checked')});

Saludos!
  #9 (permalink)  
Antiguo 08/06/2012, 02:57
Avatar de Lucieta86  
Fecha de Ingreso: noviembre-2010
Mensajes: 45
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: Boton activo al checkear un checkbox

Quike88!! Mil gracias!! ha funcionado!! :) Uff... no sabia como lo iba a hacer, y esque soy nueva en esto del jquery! pero así es como se aprende!
Gracias!

Naahuel! hemos aprendido una cosa nueva! jejeje

Saludos!
  #10 (permalink)  
Antiguo 22/06/2012, 02:14
Avatar de Lucieta86  
Fecha de Ingreso: noviembre-2010
Mensajes: 45
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: Boton activo al checkear un checkbox

Vuelvo a necesitar ayuda en este código... ¬¬

Tengo checkbox que se generan dinamicamente y junto con cada uno de ellos un boton, al hacer click sobre algun checkbox el boton se activa, hasta aqui correcto.

Ahora necesito que tambien se modifique el color del texto... El código es el mismo que tenia mas arriba...

Esto es lo que se me ha ocurrido pero no funciona:
Código Javascript:
Ver original
  1. //Activar el botón de reserva cuando se seleccione un aula
  2.     $(".aulaRes").click(function activarBoton(){
  3.       var $elem = $(this);
  4.        $elem.siblings('button').button({ disabled:!$elem.is(':checked')});
  5.      
  6.     //CAMBIAR EL COLOR DEL TEXTO
  7.       if($elem.is(':checked')){
  8.         $elem.css("color", "blue");
  9.         $elem.text().fontcolor("blue");
  10.        }
  11.       else {
  12.        $elem.css("color", "black");
  13.       }
  14.      
  15.       //Activa un botón de reservas general, cuando se seleccione almenos un checkbox
  16.         if($(".aulaRes").is(':checked')) $("#botResSel").button({ disabled: false });
  17.         else  $("#botResSel").button({ disabled: true });
  18.     });

Alguna idea? He probado ya varias cosas, pero soy muy inexperta para poder resolver esto...

Gracias
  #11 (permalink)  
Antiguo 22/06/2012, 15:54
Avatar de quike88  
Fecha de Ingreso: agosto-2008
Mensajes: 471
Antigüedad: 15 años, 7 meses
Puntos: 87
Respuesta: Boton activo al checkear un checkbox

Hola,

Me imagino que quieres cambiar el texto que se encuentra a lado de cada checkbox, prueba con esto y comentas:

Código Javascript:
Ver original
  1. //CAMBIAR EL COLOR DEL TEXTO
  2. if ($elem.is(':checked')) {
  3.     $elem.parent().css("color", "blue");
  4. } else {
  5.     $elem.parent().css("color", "black");
  6. }

Saludos.
  #12 (permalink)  
Antiguo 25/06/2012, 02:51
Avatar de Lucieta86  
Fecha de Ingreso: noviembre-2010
Mensajes: 45
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: Boton activo al checkear un checkbox

Muchisimas gracias! funciona perfectamente!!!

Crack! ;)

Etiquetas: activo, checkbox, html, input, php, botones
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 11:16.