Deshabilitar y Habilitar Input con CSS

cym · #1 (**permalink**) 11/07/2011, 23:08

Hola a todos!!! Necesito una gran ayuda. En la foto que muestro necesito que los últimos 3 Input (Responsable, Protocolo y Observaciones) se encuentren deshabilitados y que al presionar "Presione Aquí" se habiliten los 3 últimos Input. Estuve tratando de hacerlo con javascript pero me crea conflicto con el calendario que aparece al posicionarme en el primer input (Fecha de Ingreso del Equipo) que está hecho con javascript y css, si hago con javascript la habilitación y deshabilitación de los Inputs no me muestra el calendario, trate de hacerlo de diferentes formas y no me sale, me lo deshabilita al calendario. Les agradecería si hay alguna forma de hacerlo con CSS o con PHP. MUCHAS GRACIAS!!!

Les dejo el código, por las dudas les sirva de guía.

Código HTML:

Ver original<link type="text/css" rel="stylesheet" href="<?php echo $path ?>../../css/jsDatePick_ltr.min.css" />
<script type="text/javascript" src="<?php echo $path ?>../../js/jsDatePick.min.1.3.js"></script>
<link rel="STYLESHEET" type="text/css" href="calendario/estilo.css">
 
<div id="info">
<p>Ruta : <a href="<?php echo $path ?>">Panel Listado</a> > Nuevo MP</p>
</div>
<div id="infodoc">
    <p><strong>Nombre del Equipo Médico</strong>: <?php echo $documentox1['NombreEquipo']/*.'<p><strong>Tipo </strong>: '.$documento['TipoEquipo'].'<p><strong>Aplicación</strong>:'.$documento['Aplicacion'] */?></p>
    <p><strong>C&oacute;digo Inventario </strong>: <?php echo $documentox1['']?></p>
    <p><strong>Ubicacion </strong>: <?php echo $documentox1['Modelo']?></p>
    <p><strong>Fecha Fabricaci&oacute;n </strong>: <?php echo $documentox1['Fecha']?></p>
</div>
<div id="botones">
    <span class="boton_actual">Incorporaci&oacute;n</span>
    <span class="boton_enlace"><a href="<?php echo $path ?>"><img src="../../img/atras.png" alt="Volver" title="Volver" /> Volver</a></span>
</div>
<div id="listado">
<form style="width:450px;" id="frmdocumento" name="frmdocumento" method="post" action="GuardarMP.php">
<br/>
<body>
    <p id="fecmant">Fecha de Ingreso del Equipo:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="13" id="inputField" onclick="calen()" class="moy" /></p>
    <br/>
    <p id="fecmant" style=" margin-left: 9px">Frecuencia MP recomendada:&nbsp;&nbsp;cada:&nbsp;<input type="text" size="5" id="ddd" class="moy" />&nbsp;&nbsp;
        <select onchange="" id="frq" name="a" style=" width: 85px; font-size: 13px;">
                <option value="dias"> D&iacute;as </option>
                <option value="meses"> Meses </option>
                <option value="anios"> A&ntilde;os</option>
                </select></p>
                <div style="margin-left: 360px; margin-top: -25px;" id="botones">&nbsp;&nbsp;&nbsp;&nbsp;
                    <span class="boton_actual" style=" border-bottom:1px solid #004080;"><input class="mibot" type="button" id="botit" value="Calcular" style="width: 50px;" onClick="calculardma()"/></span>
                </div>
    <br/>
    <p id="fecmant">Fecha Estimada del Pr&oacute;ximo MP:&nbsp;&nbsp;<input type="text" size="13" id="inputField2" name="foper" class="moy" readonly /></p>
    <br/>
    <p id="fecmant">Fecha del &uacute;ltimo MP realizado:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="13" class="moy" readonly value="<?php echo cambiaf_a_normal ($documento['FechaM']) ?>" /></p>
    <br/>
    <p id="fecmant">Fecha del &uacute;ltimo MC realizado:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="13" class="moy" readonly value="<?php echo cambiaf_a_normal ($documentoC['FechaM']) ?>"  /></p>
<!--/body-->
        <br/>
       <div id="info">
           <h3><hr/><br/><h4 style="color:red;">¿Desea Guardar el Pr&oacute;ximo MP sugerido?<!--h4 style="margin-left:270px">Presione guardar</h4--></h4></h3>
       </div>
 
        <!--Al hace llamado a la función solo tienes que idicar el nombre del DIV entre parentesis -->
        <p><a href="#" onclick="muestra_oculta('contenido_a_mostrar')" title=""><h4 style="margin-left:290px">Presione Aqu&iacute;</h4></a></p>
<br/>
<div id="contenido_a_mostrar">
<p><h4 style="margin-left:50px">Complete los campos y presione guardar</h4></p> <br/>
    <div>
            <label for="resp">Responsable:</label>
            <input type="hidden" name="id" value="" /><!--</?php echo $documento['IdPersonas'] ?>-->
            <input type="text" name="resp" id="resp" size="50" value=""/>
    </div>
<div>
            <label for="proto">Protocolo:</label>
            <input type="text" name="proto" id="proto" maxlength="50" onkeypress="return validar(event)"/>
    </div>
    <div>
            <label for="obs">Observaciones:</label>
            <input type="text" name="obs" id="obs" maxlength="50"/>
            <!--<input type="text" style="width:300px;height:100px;font-size:12pt;font-family:Helvetica;font-weight:bold;" />-->
    </div>
 
 
<div id="fm-submit">
     <input type="submit" name="submit" id="button" value="Guardar"  />
  </div>
</div>
</body>
</form>
</div>