[SOLUCIONADO] color cajas de texto habilitadas y deshabilitadas

keine_lust · #1 (**permalink**) 19/05/2013, 23:35

buenas noches.
tengo un problema.
tengo varias cajas de texto y una opción para habilitar y deshabilitar las cajas de texto.
lo que necesito es que cuando las cajas estén deshabilitadas tengan un color verde y cuando las cajas de texto estén habilitadas vuelvan al color original de ellos que son blanco.

Código HTML:

<head>

   <script languaje="javascript">
		
      function habilitaDeshabilita(form)
      {
              if (form.rodamientos.checked == true)      <--!cajas de texto habilitadas. -->
          {
              form.referencia.disabled = false;
              form.marca.disabled = false;                           
              form.tipo.disabled = false;
          }
 
              if (form.rodamientos.checked == false)     <--!cajas de texto deshabilitadas. -->
          {
              form.referencia.disabled = true;
              form.marca.disabled = true;
              form.tipo.disabled = true;
          }
	
      }

   </script>

</head>

<body>

   <form action="" method="post">
       <input type="checkbox" name="rodamientos" value="ON" checked onClick="habilitaDeshabilita(this.form)"> RODAMIENTOS
       <br><br>
      <tr>
          <td><strong>Producto:</strong></td>
          <td><input type="text" readonly="Rodamiento" value="Rodamiento" size="10" /></td>
      </tr>
       <br></br>
      <tr>
           <td><strong>Referencia:</strong></td>
           <td><input type="text" name="referencia" id="ref" /></td>

           <td><strong>Marca:</strong></td>
           <td><input type="text" name="marca" /></td>

           <td><strong>Tipo:</strong></td>
           <td><input type="text" name="tipo" /></td>
     </tr>

           <td colspan="2"><input type="submit" value="Adicionar" /></td>
							
   </form>


</body>

se los agradecería mucho.

lucarto · #2 (**permalink**) 20/05/2013, 08:26

Hola Keine.

Te recomieno que utilices jquery que es la forma mas rapida y sencilla de hacer este tipo de cosas.

esto es lo que necesitas.

Código HTML:

Ver original<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#rodamientos").click(function(){
                    if($(this).is(':checked')){
                        $("#referencia, #marca, #tipo").attr('disabled', true);
                        $("#referencia, #marca, #tipo").css('background', 'green');
                    } else {
                        $("#referencia, #marca, #tipo").attr('disabled', false);
                        $("#referencia, #marca, #tipo").css('background', '#FFFFFF');
                    }
                });
            });
        </script>
    </head>
    
    <body>
        <form action="" method="post">
            <input type="checkbox" name="rodamientos" id="rodamientos" /> RODAMIENTOS
            <br><br>
            <table>
                <tr>
                    <td><strong>Producto:</strong></td>
                    <td><input type="text" name="" value="Rodamiento" size="10" /></td>
                </tr>
                <tr>
                    <td><strong>Referencia:</strong></td>
                    <td><input type="text" name="referencia" id="referencia" /></td>
                    <td><strong>Marca:</strong></td>
                    <td><input type="text" name="marca" id="marca" /></td>
                    <td><strong>Tipo:</strong></td>
                    <td><input type="text" name="tipo" id="tipo" /></td>
                </tr>
                <tr>
                    <td colspan="2"><input type="submit" value="Adicionar" /></td>
                </tr>
            </table>
        </form>
    </body>
</html>

Saludos

webosiris · #3 (**permalink**) 20/05/2013, 12:02

no hay necesidad de usar js ni jquery, con un simple css se soluciona:

Código CSS:

Ver originalinput[type="text"]:disabled{
background:green;
}

funciona en todos los navegadores actuales (y en IE 9 y superiores aunque con este js se puede hacer compatible hasta con en el obsoleto IE6)