Estilo de un input disabled no aparece cuando lo cambio con JS

[Bram]

Bien, en mi página he dado estilo a todos mis botones. También he querido dar un estilo cuando los botones estan desactivados. Lo he heco así:

input[disabled="disabled"]{
color: #7676f2;
background-color: #d1e5f9;
border: #7676f2 solid 1px;
}

Funciona. He probado de poner "disabled="disabled"" a un input i aparece el estilo indicado.

El problema es cuando modifico el atributo "disabled" mediante Javascript.

Lo hago así:
document.getElementById('recalcularPueblos').disab led=false;

I funciona. El problema es que el estilo no cambia y nose como tengo que hacerlo.
El problema que tengo supongo es que el navegador no "repinta el boton" y, por lo tanto, no se carga el nuevo estilo.

Además el tema es bastante problemático, ya que, al dar estilo a los botones, cuando estan disabled aparecen exactamente igual y el usuario no sabe si estan desactivados o no...

[the_web_saint]

Bueno debajo de aplicar el disabled false al boton, cambia su estilo, podrias hacerlo cambiando su clase.
Inicialmente tiene una clase css asignada que sera la que le da el estilo de deshabilitada, y cuando cambias el status a activa, le cambias de clase.

Saludos

[Bram]

Si, es una solución.

El problema es que esto me conlleva canviar muchas, muchas cosas, ya que desactivo botones en muchos lugares de mi site.

Aún así, si nadie sabe nada mejor, puede servir. Gracias.

[jvargas]

En vez de usar esto:

document.getElementById('recalcularPueblos').disab led=false;

Intenta hacerlo con:

document.getElementById('recalcularPueblos').remov eAttribute('disabled');

Acabo de hacer una prueba y de esa forma funciona.

Saludos.

[Bram]

Hola jvargas!

probé tu solución, pero no entiendo como te funciona. Rehabilitas el botón de un modo distinto (que a mi también me funciona y encuentro tu modo más pulcro), pero lo desactivas del mismo modo que lo hacía yo:

document.getElementById('recalcularPueblos').disab led=true;

por lo que, al fin y al cabo, el estilo del boton en modo "disabled" no se me ve.

[David]

Para desactivarlo podrías usar setAttribute. Pero añadir el estilo a los input disabled sería lo mismo que poner directamente input:disabled, no funciona en IE, opino que es mejor usar una clase .

[jvargas]

Iniciado por David el Grande

Para desactivarlo podrías usar setAttribute. Pero añadir el estilo a los input disabled sería lo mismo que poner directamente input:disabled, no funciona en IE, opino que es mejor usar una clase .

Como dijo el buen David, para habilitarlo usas la función setAtribute('disabled', 'disabled') y listón.

Y si no te funciona en IE, puedes crear tu clase en css y buscar con javascript todos los elementos que tengan el atributo disabled="disabled" y agregar la clase por código para que no tengas que modificar tantas cosas.

Saludos.

[Bram]

gracias, haré lo del js.

Aunqué no entiendo como defino un estilo para los botones desactivados y no funciona si se desactivan "dinamicamente". Seguro que hay una solución "limpia".

Me olvidé comentar que és en Firefox que no funciona. En explorer se ve bien. Lo que pasa en explorer es que segun tengo entendido no puedes definir estilos a botones desactivados y en firefox si puedes.

[David]

Me extraña la cosa, en IE no debería funcionar hacer de esa manera(y de hecho haciendo algunas pruebas a mí no me funcionó). A lo que me refería yo es a cambiar esto:

Código css:

input[disabled="disabled"]{
 

Por:

Código css:

input:disabled{
 

Con eso funcionará en Firefox deshabilitando "dinámicamente" pero no en IE. Es mejor usar clases, y colocarlas directamente en el documento, no usando Javascript.

[jvargas]

Bueno, es cierto, después de poner mi idea lo pensé mejor, y en vez de usar javascript cámbialas con un script en cualquier otro lenguaje de programación para que el html vaya listo al cliente.

[Bram]

Bingo! esto si funcionó! gracias.

No obstante ahora tengo otro problema y es que, cuando desactivo los botones, por alguna razón en IE6 y IE7 tengo hacer click en alguna parte para que se note el cambio de estilo.

El codigo hace que al pulsar un boton se desactiven otros cuantos. En firefox al pulsar dicho botón ya se ven todos los otros con el color "disabled" al instante. En IE6 y IE7 hace falta hacer click con el raton en cualquier lugar de la pantalla para que se "repinten" los botones con el estilo nuevo.

Pasa exacamente lo mismo al volver a activarlos.

Si quieren ver el código, no tiene nada de particular:

function disable_km()
{

if(document.getElementById("distancia").checked==t rue)
{
document.getElementById("km").disabled=true;
document.getElementById('numero').value="";
document.getElementById('numero').disabled=true;
document.getElementById('carrer').value="";
document.getElementById('carrer').disabled=true;
document.getElementById('poblacio').disabled=true;
document.getElementById('provincies').disabled=tru e;
document.getElementById('poblacions_addicionals'). disabled=true;
document.getElementById('treure_poble').disabled=t rue;
document.getElementById('afageix_poble').disabled= true;
document.getElementById('a_prov').disabled=true;
document.getElementById('a_pobl').disabled=true;
document.getElementById('recalcularPueblos').disab led=true;
}
else
{
document.getElementById("km").disabled=false;
document.getElementById('numero').disabled=false;
document.getElementById('carrer').disabled=false;
document.getElementById('poblacio').disabled=false ;
document.getElementById('provincies').disabled=fal se;
document.getElementById('poblacions_addicionals'). disabled=false;
document.getElementById('treure_poble').disabled=f alse;
document.getElementById('afageix_poble').disabled= false;
document.getElementById('a_prov').disabled=false;
document.getElementById('a_pobl').disabled=false;
document.getElementById('recalcularPueblos').disab led=false;
}


}

[jvargas]

Hola Bram,

Si puedes, pasa todo el html junto con el javascript y css para ver como asignas el evento, de que forma se activan y desactivan los elementos y de que manera se están aplicando y quitando los estilos.

Saludos.

[Bram]

El código es enorme, son 4 o 5 páginas solo el html, por lo que he obtado por mostraros la parte "importante"

<input type="text" size="3" maxlength="3" id="km" name="km" value="{$km}" onkeypress="return poblacionsProperesEvent(event)" />

<input type="button" id="recalcularPueblos" value="Recalcular pueblos próximos" onclick="testKmError()" />


<div class="footer_no_border">
<div style="float:left">
<input type="checkbox" id="distancia" name="distancia" onchange="disable_km()" />
El trabajillo
es a distancia, quiero que salga en todas las poblaciones
...


El elemento input con id "distancia" es el que carga la función disable_km (en rojo). La función disable_km la tienes entera a continuación.

La funcion disable_km desactivará muchos inputs, dos de ellos son los que aparecen arriba en azul.

El tema es que en FF no hay ningun problema, però en IE (6 y 7) cuando desactivo los botones (mediante la funcion disable_km() ) tengo que hacer click a algun lado de la pantalla del navegador porque se vea el efecto del nuevo estilo. No hay un problema funcional (porque no se puede pulsar ningún botón que está desactivado), es simplemente que el estilo para los botones desactivados no se "redibuja" en IE. Lo mismo pasa cuando pongo los botones "activos" otra vez.

aquí va la función disable km, que es la que desactiva los botones y les cambia el estilo:

function disable_km()
{

if(document.getElementById("distancia").checked==t rue)
{
document.getElementById("km").disabled=true;
document.getElementById('recalcularPueblos').disab led=true;
pintaBotoDisabled('recalcularPueblos');
pintaBotoDisabled('km');
...
}
else
{
document.getElementById("km").disabled=false;
document.getElementById('recalcularPueblos').disab led=false;
pintaBotoEnabled('recalcularPueblos');
pintaBotoEnabled('km');
...
}
}


function pintaBotoEnabled(id)
{
elem=document.getElementById(id);
elem.style.color="#FFFFFF";
elem.style.backgroundColor="#6699CC";
elem.style.border="#000099 solid 1px";
}

function pintaBotoDisabled(id)
{
elem=document.getElementById(id);
elem.style.backgroundColor="#d1e5f9";
elem.style.color="#7676f2";
elem.style.border="#7676f2 solid 1px";

}

ademas en las css tengo:
input:disabled{
color: #7676f2;
background-color: #d1e5f9;
border: #7676f2 solid 1px;
}


input , button{
font-family: Tahoma, Verdana, Arial;
font-size: 14px;
color: #FFFFFF;
background-color: #6699CC;
border: #000099 solid 1px;
}

[David]

Prueba a quitar el input:disabled y sus declaraciones, ya que en este contexto ya no tienen sentido pues el estilo al deshabilitar estás asignando usando Javascript.