Foros del Web » Programando para Internet » Javascript »

Deshabilitar DIV con un checkbox

 Estas en el tema de Deshabilitar DIV con un checkbox en el foro de Javascript en Foros del Web. HOola gente como va, bueno basicamente tengo esto. 4 Divs que se muestran y ocultan según yo selecciono la pestaña de cada una. pero yo ...
  #1 (permalink)  
Antiguo 06/05/2009, 07:56
 
Fecha de Ingreso: abril-2009
Mensajes: 13
Antigüedad: 15 años, 8 meses
Puntos: 0
Deshabilitar DIV con un checkbox
HOola gente como va, bueno basicamente tengo esto.

4 Divs que se muestran y ocultan según yo selecciono la pestaña de cada una.

pero yo necesitaria que esten todos los links deshabilitados y no pueda seleccionar ninguna, solo cuando checkee los checkboox correspodiente a cada pestaña. se entiende? aca un codigo con el que estoy practicando...

Código HTML:
<html>
<head>
<title>Prueba</title>
<script>
function mostrar(nombreCapa){
document.getElementById(nombreCapa).style.display="block";
}

function mostrartodas(capa1,capa2,capa3){
document.getElementById(capa1).style.display="block";
document.getElementById(capa2).style.display="block";
document.getElementById(capa3).style.display="block";
}

function ocultar(nombreCapa){
document.getElementById(nombreCapa).style.display="none";
}
function ocultartodas(capa1,capa2,capa3,capa4){
document.getElementById(capa1).style.display="none";
document.getElementById(capa2).style.display="none";
document.getElementById(capa3).style.display="none";
document.getElementById(capa4).style.display="none";
}
</script>
<script>

function habilitar(res){
res.onClick="#";
}
function habilitar(acu){
acu.onClick="#";
}
function habilitar(int){
int.onClick="#";
}
function habilitar(ind){
ind.onClick="#";
}

</script>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><p><a href="#" onClick="javascript:mostrartodas('capa1','capa2','capa3');">Ver todas las capas</a></p>
    </td>
  </tr>
</table>
<p>
  <input name="box1" type="checkbox"  onChange="javascript:habilitar(res); this.onclick = 'return false'"> 
  Responsability
  <br>
  <input name="box2" type="checkbox" onChange="javascript:habilitar(acu); this.onclick = 'return false'" >
Accuracy <br>
<input name="box3" type="checkbox" onChange="javascript:habilitar(int); this.onclick = 'return false'"> 
  Integrity
  <br>
  <input name="box4" type="checkbox" onChange="javascript:habilitar(ind); this.onclick = 'return false'">
  Independence</p>
<div style="position:absolute; margin-top:80px; left: 29px; top: 107px; width: 79px; border:thin #000000" align="right"><a id="res" href="#" onClick="javascript:mostrar('capa1');ocultartodas('capa2','capa3','capa4');" >RESPONSABILTY</a></div>

<div style="position:absolute; margin-top:80px; left: 176px; top: 113px; width: 79px;" align="right"><a  id="acu" href="#" onClick="javascript:mostrar('capa2');ocultartodas('capa1','capa3','capa4');">ACCURACY</a></div>

<div style="position:absolute; margin-top:80px; left: 275px; top: 113px; width: 79px;" align="right"><a id="int" href="#" onClick="javascript:mostrar('capa3');ocultartodas('capa1','capa2','capa4');">INTEGRITY</a></div>

<div style="position:absolute; margin-top:80px; left: 377px; top: 113px; width: 79px;" align="right"><a id="ind" href="#" onClick="javascript:mostrar('capa4');ocultartodas('capa1','capa2','capa3');">INDEPENDENCE</a></div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><br>
  <br>
  <br>
  <br>
  <br>
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="#" onClick="javascript:ocultartodas('capa1','capa2','capa3');">Cerrar todas las capas</a></td>
  </tr>
</table>
<p>&nbsp;</p>
<div id="capa1" style="background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; width:413px; height:200px; position:absolute; left: 38px; top: 230px; z-index: 15; display:none" align="center" top-margin="100px">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p align="center"> CAPA 1 </p>
</div>
<div id="capa2" style="background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; width:414px; height:204px; position:absolute; left: 38px; top: 230px; z-index: 10; display:none" align="center" top-margin="100px">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p align="center"> CAPA 2 </p>
</div>
<div id="capa3" style="background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; width:413px; height:200px; position:absolute; left: 40px; top: 231px; z-index: 5; display:none" align="center" top-margin="100px">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p align="center"> CAPA 3 </p>
</div>
<div id="capa4" style="background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; width:413px; height:200px; position:absolute; left: 40px; top: 231px; z-index: 0; display:none" align="center" top-margin="100px">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p align="center"> CAPA 4 </p>
</div>
</body>
</html>
espero puedan ayudarme, gracias.
  #2 (permalink)  
Antiguo 07/05/2009, 01:05
Avatar de KarlanKas
Moderador extraterrestre
  
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 23 años
Puntos: 61
Respuesta: Deshabilitar DIV con un checkbox
Es esto lo que quieres?
Código javascript: 
Ver original
  1. <html>
  2. <head>
  3. <title>Prueba</title>
  4. <script>
  5. antigua="";
  6. function obj(x){
  7.     return document.getElementById(x)
  8. }
  9. function mostrar(nombreCapa,esto){
  10.  
  11.     if(esto.title!="off"){
  12.         if(antigua!="" && antigua!=nombreCapa){
  13.             ocultar(antigua);
  14.         }
  15.         
  16.         obj(nombreCapa).style.display="block";
  17.         antigua=nombreCapa
  18.     }
  19. }
  20.  
  21. function ocultar(nombreCapa){
  22. obj(nombreCapa).style.display="none";
  23. }
  24.  
  25. function mostrartodas(){
  26.     
  27. mostrar('capa1',obj('res'))
  28. mostrar('capa2',obj('acu'))
  29. mostrar('capa3',obj('int'))
  30. mostrar('capa4',obj('ind'))
  31.  
  32. }
  33.  
  34.  
  35. function ocultartodas(){
  36. ocultar('capa1')
  37. ocultar('capa2')
  38. ocultar('capa3')
  39. ocultar('capa4')
  40. }
  41.  
  42. function habilitar(queHacer,aqui,donde){
  43. obj(aqui).title=(queHacer)?"on":"off";
  44.  
  45. if(!queHacer){
  46.     obj(donde).style.display="none"
  47. }
  48. }
  49.  
  50.  
  51. </script>
  52.  
  53.  
  54. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  55. </head>
  56.  
  57. <body>
  58. <table width="100%"  border="0" cellspacing="0" cellpadding="0">
  59.   <tr>
  60.     <td><p><a href="#" onClick="mostrartodas();return false">Ver todas las capas</a></p>
  61.     </td>
  62.   </tr>
  63. </table>
  64. <p>
  65.   <input name="box1" type="checkbox" onclick="habilitar(this.checked,'res','capa1')" /> 
  66.   Responsability
  67.   <br>
  68.   <input name="box2" type="checkbox" onclick="habilitar(this.checked,'acu','capa2')" />
  69. Accuracy <br>
  70. <input name="box3" type="checkbox"  onclick="habilitar(this.checked,'int','capa3')" /> 
  71.   Integrity
  72.   <br>
  73.   <input name="box4" type="checkbox" onclick="habilitar(this.checked,'ind','capa4')" />
  74.   Independence</p>
  75. <div style="position:absolute; margin-top:80px; left: 29px; top: 107px; width: 79px; border:thin #000000" align="right">
  76.     <a id="res" href="#" title="off" onClick="javascript:mostrar('capa1',this);return false" >RESPONSABILTY</a>
  77. </div>
  78.  
  79. <div style="position:absolute; margin-top:80px; left: 176px; top: 113px; width: 79px;" align="right">
  80.     <a  id="acu" href="#" title="off" onClick="javascript:mostrar('capa2',this);return false">ACCURACY</a>
  81. </div>
  82.  
  83. <div style="position:absolute; margin-top:80px; left: 275px; top: 113px; width: 79px;" align="right">
  84.     <a id="int" href="#" title="off" onClick="javascript:mostrar('capa3',this);return false">INTEGRITY</a>
  85. </div>
  86.  
  87. <div style="position:absolute; margin-top:80px; left: 377px; top: 113px; width: 79px;" align="right">
  88.     <a id="ind" href="#" title="off" onClick="javascript:mostrar('capa4',this);return false">INDEPENDENCE</a>
  89. </div>
  90.  
  91. <p>&nbsp;</p>
  92. <p>&nbsp;</p>
  93. <p>&nbsp;</p>
  94. <p>&nbsp;</p>
  95. <p><br>
  96.   <br>
  97.   <br>
  98.   <br>
  99.   <br>
  100. </p>
  101. <p>&nbsp;</p>
  102. <p>&nbsp;</p>
  103. <p>&nbsp;</p>
  104. <table width="100%"  border="0" cellspacing="0" cellpadding="0">
  105.   <tr>
  106.     <td><a href="#" onClick="javascript:ocultartodas('capa1','capa2','capa3');">Cerrar todas las capas</a></td>
  107.   </tr>
  108. </table>
  109. <p>&nbsp;</p>
  110. <div id="capa1" style="background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; width:413px; height:200px; position:absolute; left: 38px; top: 230px; z-index: 15; display:none" align="center" top-margin="100px">
  111.   <p>&nbsp;</p>
  112.   <p>&nbsp;</p>
  113.   <p align="center"> CAPA 1 </p>
  114. </div>
  115. <div id="capa2" style="background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; width:414px; height:204px; position:absolute; left: 38px; top: 230px; z-index: 10; display:none" align="center" top-margin="100px">
  116.   <p>&nbsp;</p>
  117.   <p>&nbsp;</p>
  118.   <p align="center"> CAPA 2 </p>
  119. </div>
  120. <div id="capa3" style="background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; width:413px; height:200px; position:absolute; left: 40px; top: 231px; z-index: 5; display:none" align="center" top-margin="100px">
  121.   <p>&nbsp;</p>
  122.   <p>&nbsp;</p>
  123.   <p align="center"> CAPA 3 </p>
  124. </div>
  125. <div id="capa4" style="background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; width:413px; height:200px; position:absolute; left: 40px; top: 231px; z-index: 0; display:none" align="center" top-margin="100px">
  126.   <p>&nbsp;</p>
  127.   <p>&nbsp;</p>
  128.   <p align="center"> CAPA 4 </p>
  129. </div>
  130. </body>
  131. </html>

Confío en que te sirva! He cambiado un par de cosas de tu código, pero he intentado respetar el espíritu (y que funcione, claro!).

Un saludo!
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #3 (permalink)  
Antiguo 07/05/2009, 06:46
 
Fecha de Ingreso: abril-2009
Mensajes: 13
Antigüedad: 15 años, 8 meses
Puntos: 0
Respuesta: Deshabilitar DIV con un checkbox
Hola, desde ya muchas gracias por ayudarme...
me anduvo perfecto, es justo lo que yo queria! :D:D

este foro es lo mas!
ahora otra, cosa, quiero que se pinte de otro color la fuente que esta habilitada como hago?

GRACIAAAS!!
  #4 (permalink)  
Antiguo 07/05/2009, 07:30
Avatar de KarlanKas
Moderador extraterrestre
  
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 23 años
Puntos: 61
Respuesta: Deshabilitar DIV con un checkbox


Cambia la function habilitar por esta:
Código javascript: 
Ver original
  1. function habilitar(queHacer,aqui,donde){
  2. enlace_habilitado="#FF0000";
  3. enlace_deshabilitado="#D0D0D0";
  4. obj(aqui).title=(queHacer)?"on":"off";
  5. if(!queHacer){
  6.     obj(donde).style.display="none"
  7.     obj(aqui).style.color=enlace_deshabilitado;
  8. }
  9. else{
  10. obj(aqui).style.color=enlace_habilitado;
  11. }
  12.  
  13. }

Un saludo!
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #5 (permalink)  
Antiguo 07/05/2009, 13:59
 
Fecha de Ingreso: abril-2009
Mensajes: 13
Antigüedad: 15 años, 8 meses
Puntos: 0
Respuesta: Deshabilitar DIV con un checkbox
Muchiisimas gracias capo!! eres un genio!

:)
  #6 (permalink)  
Antiguo 08/05/2009, 00:19
Avatar de KarlanKas
Moderador extraterrestre
  
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 23 años
Puntos: 61
Respuesta: Deshabilitar DIV con un checkbox
Me alegro de que te sirviera!
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:50.