Foros del Web » Programando para Internet » Javascript »

Actvar y desactivar select mediante radio

Estas en el tema de Actvar y desactivar select mediante radio en el foro de Javascript en Foros del Web. Hola amigos como estais, Vereis, tengo dos radio que al seleccionar uno u otro y dependiando de cual muestra dos div, dentro de cada uno ...
  #1 (permalink)  
Antiguo 30/04/2013, 01:30
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 15 años, 2 meses
Puntos: 4
Actvar y desactivar select mediante radio

Hola amigos como estais,

Vereis, tengo dos radio que al seleccionar uno u otro y dependiando de cual muestra dos div, dentro de cada uno de estos div hay otros dos radio que al pulsar uno se oculta el otro y y viceversa.

El problema es que cuando pulsamos uno de estos dos ultimos radio y despues pulsamos un de los primeros al volver a los dos ultimos radios solo aparece uno de ellos el que se ha seleccionado y necesitaria que apareciesen los dos.

Este es el codigo de los dos primeros radios:

Código Javascript:
Ver original
  1. function showMe () {
  2.     var vis1;
  3.     var box1;
  4.     for (ii=1;ii<=2;ii++){
  5.         box1 = document.getElementById('radio' + ii);
  6.         vis1 = (box1.checked) ? "block" : "none";
  7.         document.getElementById('div' + ii).style.display = vis1;
  8.  
  9.     }
  10. }

Y el html :

Código HTML:
Ver original
  1. <div class="div_form_proceso_productos_articulos">
  2.  
  3.  
  4.                             <ul class="form_proceso ul">
  5.  
  6.                                 <li class="form_proceso li">
  7.                                    
  8.                                     <div class="form_proceso_radio">
  9.                                         <input type="radio" id="radio1"  name="lista" value="productos" checked onclick="showMe();" onChange="actualizarCampos()">
  10.                                     </div>
  11.                                    
  12.                                     <label class="form_proceso label" for="productos">Crea tu estantería de <strong>productos en general.</strong>
  13.                                     </label>
  14.  
  15.                                 </li>
  16.  
  17.                                 <li class="form_proceso li">
  18.                                    
  19.                                     <div class="form_proceso_radio">
  20.                                         <input type="radio" id="radio2" name="lista" value="marcas" onclick="showMe()" onChange="actualizarCampos()">
  21.                                     </div>
  22.  
  23.                                     <label class="form_proceso label" for="articulos">Crea tu estantería de <strong>artículos por marca.</strong>
  24.                                     </label>
  25.  
  26.                                 </li>
  27.  
  28.                             </ul>
  29.  
  30.  
  31.                     </div>


Y este el del segundo:

Código Javascript:
Ver original
  1. function show_articulos_marcas () {
  2.     var vis;
  3.     var box;   
  4.     for (i=1;i<=2;i++){
  5.         box = document.getElementById('radio_articulos_marcas' + i);
  6.         vis = (box.checked) ? "block" : "none";
  7.        
  8.         document.getElementById('articulos_marcas' + i).style.display = vis;
  9.         document.getElementById('numero_articulos').disabled = false;  
  10.         document.getElementById('numero_articulos_marcas').disabled = false;   
  11.  
  12.     }
  13. }



Y el html de los segundos radios:

Código HTML:
Ver original
  1. <div id="articulos_marcas2" >
  2.  
  3.             <p class="titulos_cabeceras_productos"><input type="radio" id="radio_articulos_marcas2"  name="lista_articulos" value="productos" onclick="show_articulos_marcas(this.value)" onChange="actualizarCampos()" class="articulos_radio">Diseña tu estantería por marca <span style="font-weight:normal;"></span></p>
  4.  
  5.             <!--<p class="titulos_cabeceras_interior" style="margin-top:30px;">Los platos de tu carta  </p>-->
  6.  
  7.  
  8.  
  9.                 <div class="div_form_proceso">             
  10.  
  11.  
  12.                         <label class="style_label_proceso">¿Cuál es tu marca?</label>
  13.                         <input type="text" name="nombre_estanteria_marcas" class="input_text_form_proceso">
  14.  
  15.                         <label class="style_label_proceso">¿Cuántos artículos ofreces de esta marca?</label>
  16.  
  17.                         <select id="numero_articulos_marcas" name="numero_articulos_marcas" class="textarea_form_proceso" onChange="actualizarCampos(this.value)" disabled="disabled">
  18.                         <option>-Seleccione-</option>
  19.                         <option value="5">hasta 5</option>
  20.                         <option value="10">hasta 10</option>
  21.                         <option value="20">hasta 20</option>
  22.                         <option value="35">hasta 35</option>
  23.                         <option value="50">hasta 50</option>
  24.                         <option value="75">hasta 75</option>                                   
  25.                         <option value="100">hasta 100</option>
  26.                         </select>
  27.  
  28.  
  29.                 </div>
  30.  
  31.  
  32.                 <div class="div_right_proceso">        
  33.  
  34.                     <p class="texto_info_proceso">Para diseñar tu estantería con tus marcas, responde a cuál es tu marca, por ejemplo, Levis. A continuación, elige el número de artículos que deseas introducir de esa marca, hasta 5, hasta 10, etc...</p>
  35.                
  36.                 </div>
  37.  
  38.         </div>
  39.  
  40.         </div>


A ver si alguien sabe de que modo se podria solucionar esto.

Un saludo
  #2 (permalink)  
Antiguo 30/04/2013, 03:05
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 15 años, 2 meses
Puntos: 4
Respuesta: Actvar y desactivar select mediante radio

Hola de nuevo que tal,

He conseguido solucionar el problema modificando el codigo de este modo:

Código Javascript:
Ver original
  1. function actualizarCampos(num_campos)
  2. {
  3.     zona = document.getElementById('campos_text');
  4.  
  5.  
  6.     zona.innerHTML = '';
  7.  
  8.     for(i = 1; i <= num_campos; i++)
  9.     {
  10.         if(i == 1){
  11.  
  12.                 zona.innerHTML = '<p class="titulos_cabeceras">Rellenar lista</p><p class="texto_explicativo_gris">Introduce todas tus referencias en plural</p>';
  13.         }
  14.                 zona.innerHTML += '<div style="width:47%; float:left; margin-bottom:10px"><span style="font-weight:bold;"><div style="width:90px; float:left; margin:0px 0px 0px 30px;">Artículo '+i+'</div></span><input type="text" name="fichero'+i+'" size="47"  maxlength="35"/></div>';
  15.     }    
  16. }
  17.  
  18. function showMe () {
  19.     var vis1;
  20.     var box1;
  21.     for (ii=1;ii<=2;ii++){
  22.         box1 = document.getElementById('radio' + ii);
  23.         vis1 = (box1.checked) ? "block" : "none";
  24.         document.getElementById('div' + ii).style.display = vis1;
  25.            
  26.         if(document.getElementById('radio' + ii).value == 'marcas'){
  27.             document.getElementById("nombre_estanteria_articulos").value="";
  28.             document.getElementById("nombre_estanteria_marcas").value="";
  29.             document.getElementById("numero_articulos").value="";
  30.             document.getElementById("numero_articulos_marcas").value="";
  31.             document.getElementById("nombre_estanteria_articulos").disabled = true;
  32.             document.getElementById("nombre_estanteria_marcas").disabled = true;
  33.             document.getElementById('articulos_marcas' + '1').style.display = 'block';
  34.             document.getElementById('articulos_marcas' + '2').style.display = 'block';
  35.             document.getElementById('radio_articulos_marcas1').checked = false;
  36.             document.getElementById('radio_articulos_marcas2').checked = false;            
  37.             document.getElementById('numero_articulos').disabled = true;   
  38.             document.getElementById('numero_articulos_marcas').disabled = true;
  39.             document.getElementById('articulos_marcas' + '3').style.display = 'block';             
  40.         }
  41.  
  42.         if(document.getElementById('radio' + ii).value == 'productos'){
  43.             document.getElementById("nombre_estanteria").value="";
  44.             document.getElementById("numero_articulos_general").value="";
  45.         }
  46.  
  47.     }
  48. }
  49.  
  50.  
  51. function show_articulos_marcas () {
  52.     var vis;
  53.     var box;   
  54.     for (i=1;i<=2;i++){
  55.         box = document.getElementById('radio_articulos_marcas' + i);
  56.         vis = (box.checked) ? "block" : "none";
  57.        
  58.         document.getElementById('articulos_marcas' + i).style.display = vis;
  59.         document.getElementById('numero_articulos').disabled = false;  
  60.         document.getElementById('numero_articulos_marcas').disabled = false;
  61.         document.getElementById("nombre_estanteria_articulos").disabled = false;
  62.         document.getElementById("nombre_estanteria_marcas").disabled = false;          
  63.  
  64.     }
  65.  
  66. }


el unico problema es que como se ve en la penrimera funcion este creando unos campos dinamicamente y cuando seleccionamos los checkbox en mozilla estos campos se ocultan pero IE los oculta cuando hacemos click sobre cualquier parte de la pagina, es un poco raro, a ver si alguien se le ocurre que puede estar pasando.

Un saludo

Etiquetas: campos, desactivar, html, input, mediante, radio, select
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 05:55.