deshabilitar boton activo y habilitar los demas.

lexus · #1 (**permalink**) 14/07/2008, 09:47

hola,

tengo varios botones de esta forma

<button name="boton" onclick="javascript:centro.location.href='link1.as p'">boton 1</button>

<button name="boton" onclick="javascript:centro.location.href='link2.as p'">boton 2</button>

<button name="boton" onclick="javascript:centro.location.href='link3.as p'">boton 3</button>

ke apuntan a un iframe..
la idea es ke kiero ke cuando le de click a un boton este se deshabilite como para saber que estoy actiualmente en ese link. y al oprimir en otro boton el otro se deshabilite y el ke anteriormente estaba deshabilitado se vuelva a habilitar. es mas o menos como funcionan los tabs.

alguein me puede ayudar?

gracias..

David · #2 (**permalink**) 14/07/2008, 09:55

Lo que puedes hacer es colocar una función que active todos los botones y desactive el ID que le pases, luego, en el onclick de cada botón llamas a esa función.

lexus · #3 (**permalink**) 14/07/2008, 09:59

gracias,.. me podrias colaborar con alguna idea? la verdada no se mucho de javascript.
gracias.

David · #4 (**permalink**) 14/07/2008, 10:10

Por ejemplo:

Código PHP:

  function active(id) {
      document.getElementById('boton1').disabled=false;
      document.getElementById('boton2').disabled=false;
      document.getElementById('boton3').disabled=false;
      document.getElementById(id).disabled=true;
}

En este código habilitamos primeramente los 3 botones y luego deshabilitamos el ID recibido. Para que funcione simplemente debes asignar los id correspondiente a tus button y luego en el onclick agregas esto: "active(this.id);"

Saludos

lexus · #5 (**permalink**) 14/07/2008, 10:23

ese es el problema, es ke no son solo 3 botones,

pueden ser 10, 20, etc..
me imagino ke habria que hacerlo con un for o algo asi..
la idea es: deshabilite al que le di click, y habilite todos los demas.

ta como complicado.

JavierB · #6 (**permalink**) 14/07/2008, 10:28

Hola lexus

A ver si te sirve esto:

Código PHP:

  <html>
<head>
<script type="text/javascript">
function desactivar(obj) {
  padre = obj.parentNode;
  for (i=0; ele = padre.getElementsByTagName('input')[i]; i++)
    ele.disabled = ele==obj;
}
</script>
</head>
<body>
<div id="algo">
<input type="button" value="Botón 1" onclick = "desactivar(this)" />
<input type="button" value="Botón 2" onclick = "desactivar(this)" />
<input type="button" value="Botón 3" onclick = "desactivar(this)" />
</div>
</body>
</html>

Saludos,

lexus · #7 (**permalink**) 14/07/2008, 10:38

gacias por la ayuda,
me lo deshabilita pero no lo vuelve a habilitar cuando oprimo otro boton

lo modifique asi

function desactivar(obj) {
padre = obj.parentNode;
for (i=0; ele = padre.getElementsByTagName('button')[i]; i++)
ele.disabled = ele==obj;
}

mis botones los tengo asi

<button name="boton" id="juan" class="menuppal" title="Editar Cliente" onclick="javascript:centro.location.href='cliente_ info.asp';desactivar(this);"><img src="../img/botones/editar.gif" /> Editar Cliente</button>

David · #8 (**permalink**) 14/07/2008, 10:43

¡Qué extraño! A mí me funciona perfectamente el ejemplo que puso JavierB.
¿Podrías poner la estructura completa de tu formulario?...

lexus · #9 (**permalink**) 14/07/2008, 10:46

es ke no es un formulario son solo botones asi como el ke puse y los botones no son de formulario no son tag input sino tag button

arriba puse como son mis botones.

<button name="boton" id="juan" class="menuppal" title="Editar Cliente" onclick="javascript:centro.location.href='cliente_ info.asp';desactivar(this);"><img src="../img/botones/editar.gif" /> Editar Cliente</button>

asi son todos.

David · #10 (**permalink**) 14/07/2008, 10:56

Pues sí, yo intenté con el tag button y me funcionó.
¿Tienes certeza que esta parte del código funciona?:

Código PHP:

  centro.location.href='cliente_ info.asp'

Porque si no funciona ya no ejecutará la función desactivar.

lexus · #11 (**permalink**) 14/07/2008, 10:58

si el link al iframe me funciona perfecto, incluso desactiva los botones..
pero no los vuelve a activar cuando le doy click a otro boton.. al final kedan todos deshabiltiados.

David · #12 (**permalink**) 14/07/2008, 10:59

Realmente, muy raro, ¿podrías poner el enlace a tu página para que la veamos?

lexus · #13 (**permalink**) 14/07/2008, 11:03

ahi monte una prueba porke no es para internet sino una aplicacion de mi intranet
http://www.crearpublicitarios.com/prueba.asp

JavierB · #14 (**permalink**) 14/07/2008, 11:12

Hola lexus

Tienes los botones dentro de una tabla, cuando buscas el parent del botón, no es la tabla, sino la celda, por eso no te funciona. Pon un identificador a la tabla:

Código:

<table id="algo">

y cambia esta línea del código:

Código:

padre = document.getElementById('algo');

Saludos,

lexus · #15 (**permalink**) 14/07/2008, 13:34

perfecto con este ultimo cambio ya me funciono

muchas gracias..

lexus · #16 (**permalink**) 15/07/2008, 13:21

hola, ahora me surgio otra cosa.. ademas de ke el boton este deshabilitado debe cambiar a negrita y a subrayado..

encontre este link http://javascript.espaciolatino.com/trucos/t29.htm pero no supe como adaptarlo al javascript ke ustedes hicieron.
gracias.

David · #17 (**permalink**) 15/07/2008, 13:26

¿Qué es lo que debe cambiar a negrita y subrayado? ¿El botón deshabilitado? En realidad, no recuerdo si se puede dar formato a un botón, pero trataré de investigar algo al respecto.

P.S.: Es el script que hizo JavierB y no el que 'ustedes hicieron'

lexus · #18 (**permalink**) 15/07/2008, 13:29

si se puede hacer por medio de estilos, ya lo hice manualmente y si cambia.. pero pues necesito ke sea asi como con javascript tambien..

jaj gracias a los dos detodas formas por la colaboracion y el interes.

David · #19 (**permalink**) 15/07/2008, 13:32

¿Cómo lo hiciste 'manualmente'? Quizás así a alguien se le ocurre como hacerlo con Javascript.

Si es solo por estilos puedes poner:

Código PHP:

  document.getElementById('boton').style = "Aquí pones el estilo";

lexus · #20 (**permalink**) 15/07/2008, 13:37

con los estilos del estilos.css

y al boton le doy ese estilo asi puedo colocar cualquier tipo de letra con cualquier caracteristica.

<button name="boton" class="pestana_mediana" title="Datos del Cliente" onclick="javascript:centro.location.href='http://www.oktopuscali.com';desactivar(this);"><img src="../img/botones/editar.gif" /> Datos del Cliente</button>

y el estilo ke va en mi .css es asi

.pestana_mediana{
BORDER-RIGHT: #fff 0px solid;
BORDER-TOP: #fff 0px solid;
BACKGROUND: url(../img/pestana_mediana.gif) no-repeat;
MARGIN: 0px;
width:110;
BORDER-LEFT: #fff 0px solid;
COLOR: #000;
BORDER-BOTTOM: #fff 0px solid;
HEIGHT: 18px;
font-size:9px;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: bold;
cursor: hand;
}

igual como lo hcen en esta pagina es bien, pero no se como integrarlo..
p://javascript.espaciolatino.com/trucos/t29.htm

David · #21 (**permalink**) 15/07/2008, 13:40

Pues simplemente compruebas si ele.disabled es verdadero, en ese caso, aplicas el estilo:

Código PHP:

  ele.className = "estilo_deshabilitado";

Si no está deshabilitado, volverlo a la clase normal:

Código PHP:

  ele.className = "estilo_normal";

¿Te sirve?

lexus · #22 (**permalink**) 15/07/2008, 13:41

si esa es la idea.

pero disculpame la ignorancia no se casi nada de javascript

donde pondria eso aqui:

function desactivar(obj) {
padre = document.getElementById('algo');
for (i=0; ele = padre.getElementsByTagName('button')[i]; i++)
ele.disabled = ele==obj;
}

David · #23 (**permalink**) 15/07/2008, 13:50

Sería más o menos así. Me tomo el atrevimiento de prestar el código de JavierB:

Código PHP:

  function desactivar(obj){
      padre = document.getElementById('algo');
      for (i=0; ele=padre.getElementsByTagName('button')[i]; i++) {
            ele.disabled = ele==obj;
            if (ele.disabled=true) {
                  ele.className = 'clase_deshabilitada'; }
            else {
                  ele.className = 'clase_normal'; }
      }
}

¿Entiendes lo que hacemos? Vemos si ele.disabled es verdadero, si así es aplicamos la clase, de lo contrario aplicamos la clase normal...

lexus · #24 (**permalink**) 15/07/2008, 13:58

lo probe y me los deshabilito todos y les cambio el estilo a todos

ya no me funciona bien como antges.

David · #25 (**permalink**) 15/07/2008, 14:00

Lo siento, es que escribí mal, hice una asignación en vez de una comparación. Prueba poniendo así:

Código PHP:

  function desactivar(obj){
      padre = document.getElementById('algo');
      for (i=0; ele=padre.getElementsByTagName('button')[i]; i++) {
            ele.disabled = ele==obj;
            if (ele.disabled==true) {
                  ele.className = 'clase_deshabilitada'; }
            else {
                  ele.className = 'clase_normal'; }
      }
}

Espero que esta vez funcione. Saludos

P.S.: A todos nos sucede de vez en cuando, o tal vez solo a mí

.

lexus · #26 (**permalink**) 15/07/2008, 14:05

excelente
muchisimas gracias..
perfecto.