CSS para cuando los controles estén Disabled con JavaScript

Escorpion_Negro · #1 (**permalink**) 18/12/2008, 12:00

Alguno que me pueda ayudar, en estos me encuentro con el siguiente problema que estoy con formulario donde tengo que hacerle algunos controles con JavaScript un Disabled, lo cual en el navegador visualmente el objeto HMTL se coloca de colores grises claros lo que hace para el usuario que vea el formulario no note lo que este escrito dentro de los ComboBox y si están Checkeados los CheckBox, me dijeron que podría solucionar esto con un CSS pero me encuentro algo perdido. Este codigo aplica para los ComboBox en FireFox y no IE, también no funciona para CheckBox ya sea FireFox o IE.

Saludos

Código PHP:

  <html>

  <head>

  

   <style>

     .miclase { 

          background-color: #FFFFFF;

          color:#000000 ;

      }

   </style>

  </head>

  <body>

         <select id=combo1>

                  <option>contenido1</option>

                  <option>contenido2</option>

                  <option>contenido3</option>

         </select>

 
         <select id=combo2>

                  <option>contenido4</option>

                  <option>contenido5</option>

                  <option>contenido6</option>

         </select>

         <input name="radiobutton" type="radio" value="radiobutton">

         <input type="checkbox" name="checkbox" value="checkbox">

  <br>

   <br>

   <a href="javascript:disable();">disable</a>

   <a href="javascript:enable();">enable</a>

  </body>

</html>

 
<script language="javascript">

   function disable() {

      var combo1 = document.getElementById('combo1');

      var combo2 = document.getElementById('combo2');

      var radiobutton = document.getElementById('radiobutton');

      var radiobutton = document.getElementById('checkbox');

 
       combo1.disabled  = true;

       combo1.className = "miclase";

       

       combo2.disabled  = true;

       combo2.className = "miclase";

       

 
       radiobutton.className = "miclase";

       

       checkbox.disabled  = true;

       checkbox.className = "miclase";

 
   }

   function enable() {

      var combo1 = document.getElementById('combo1');

      var combo2 = document.getElementById('combo2');

     var radiobutton = document.getElementById('radiobutton');

       combo1.disabled  = false;

       combo1.className = "";

       

       combo2.disabled  = false;

       combo2.className = "";

       

        radiobutton.disabled  = false;

       radiobutton.className = "";

       checkbox.disabled  = false;

                 checkbox.className = "";

   }

</script>

trasgukabi · #2 (**permalink**) 20/12/2008, 00:12

de aqui podras sacar lo que necesitas
**sacado de
HTMLCODETUTORIAL
Code:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.disabled {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-weight: bold;
   color: #000000;
   background-color: #666666;
   border: 1px solid #000000;
}
.enabled {
   font-family: "Times New Roman", Times, serif;
   font-size: 12px;
   font-weight: bold;
   color: #0000FF;
   background-color: #CCCCCC;
   border: 1px solid #0000FF;
}
-->
</style>
</head>

<body>
<form name="form1" id="form1" method="post" action="">
  <input type="button" name="Button" value="Button" class="enabled" onclick="this.disabled=true;this.className='disabled';"/>
</form>
</body>
</html>