Deshabilitar parte de formulario con checkbox

[una_xikilla]

Hola!

Tengo un formulario en el que hay que rellenar estudios.
En una parte tengo que introducir la fecha de fin de estudios pero cabe la posibilidad de que todavía se esté cursando.

Tengo 2 campos de texto (mesFin, añoFin) y un checkbox (Cursando), cómo hago para que si marco el checkbox no se pueda meter nada en los campos de texto? incluso he visto en otras web que lo cambian también de color...
Alguien sabe hacer esto?

Muchas gracias!

[Legoltaz]

Código PHP:

  <input type="checkbox" onClick="var mesFin = document.getElementById('mesFin');var añoFin = document.getElementById('añoFin');if(this.checked){mesFin.disabled = 'true';añoFin.disabled = true;}else{mesFin.disabled = false;añoFin.disabled = false;}" />  
   

[una_xikilla]

¡¡¡ MUCHAS GRACIAS LEGOLTAZ !!!!

Y por casualidad sabrías como se podría cambiar el color de la letra cuando deshabilito los 2 campos?

Gracias de nuevo.

[Legoltaz]

Iniciado por una_xikilla

¡¡¡ MUCHAS GRACIAS LEGOLTAZ !!!!

Y por casualidad sabrías como se podría cambiar el color de la letra cuando deshabilito los 2 campos?

Gracias de nuevo.

Sí, pero en donde? Me refiero a qué campos quieres que se les cambie la letra?

[una_xikilla]

Me gustaría que cuando se deshabilitase el mes y el año (porque se está cursando) aparezca el texto "Mes" y "Año" por ejemplo de color gris (para que quede más claro que esos campos están deshabilitados)

[Legoltaz]

Algo así?:

Código PHP:

  <input type="checkbox" onClick="var mesFin = document.getElementById('mesFin');var añoFin = document.getElementById('añoFin');var mes = document.getElementById('mes');var año = document.getElementById('año');if(this.checked){mesFin.disabled = 'true';añoFin.disabled = true;mes.style.color = 'grey';año.style.color = 'grey';}else{mesFin.disabled = false;añoFin.disabled = false;mes.style.color = 'black';año.style.color = 'black';}" /> <br /><br /> 
<p id="mes">Mes</p> <input id="mesFin" /><br /> 
<p id="año">Año</p> <input id="añoFin" />  
   

[una_xikilla]

Pues no me cambia el color...

[una_xikilla]

El color en principio es el azul.
Marco la casilla (no pasa nada), la desactivo y se pone de color negro.

Qué ocurre?

[David]

En el código de Legoltaz lo que está mal es que debería ser gray en vez de grey (quizás hasta sea mejor especificar el código del color en hexadecimal para evitar confusión), aunque es poco semántico, ya que el texto no es un párrafo sino un <label>.

Otra cosa, para facilitar la lecutura del código te recomiendo que lo pongas en una función.

[caricatos]

Iniciado por David el Grande

En el código de Legoltaz lo que está mal es que debería ser gray en vez de grey (quizás hasta sea mejor especificar el código del color en hexadecimal para evitar confusión), aunque es poco semántico, ya que el texto no es un párrafo sino un <label>.

Otra cosa, para facilitar la lecutura del código te recomiendo que lo pongas en una función.

Hola:

No conozco todos los colores, pero tanto gray como grey son valores válidos (lo que no sé es si los soportan todos los navegadores.

Saludos

[David]

Iniciado por caricatos

Hola:

No conozco todos los colores, pero tanto gray como grey son valores válidos (lo que no sé es si los soportan todos los navegadores.

Saludos

Infelizmente, he probado con grey y no funcionó en IE , por eso sugerí la modificación .

[una_xikilla]

El color no consigo que cambie, no sé por qué.

Voy a poner el código a ver que puede ser...

Código:

function comprobarCheckBox(){ 

/*if (document.formEstudios.checkbox.checked) 
{
document.formEstudios.fechaFin.disabled = true;
document.formEstudios.fechaInicio.style.color = "#CCCCCC";
}
else
{
document.formEstudios.fechaFin.disabled = false;
document.formEstudios.fechaInicio.style.color = "#FFFFFF";
} */
var fFin = document.getElementById('fFin');
var fechaFin = document.getElementById('fechaFin');

if(this.checked){
	fechaFin.disabled = true;
	fFin.style.color = '#999999';
}else{
	fechaFin.disabled = false;
	fFin.style.color = '#000080';
} 

}

<

Código HTML:

td height="30" align="right" bgcolor="#FFFF66" class="FuenteRegistro"><p id="fFin">FECHA FIN </p></td>
                    <td width="27%" align="left" bgcolor="#FFFF66" class="FuenteRegistro"><input name="fechaFin" type="text" id="label" size="7" maxlength="7" />                  
                     (mm-aaaa) 
                     <label for="checkbox"></label></td>
                    <td width="43%" align="left" bgcolor="#FFFF66" class="FuenteRegistro"><input type="checkbox" name="checkbox" value="checkbox" id="checkbox" onClick="comprobarCheckBox();"/>
                      <label for="checkbox">Cursando actualmente </label></td> 

[David]

Hay dos errores, estás tratando de obtener por document.getElementById el input fechaFin, cuando ese input no tiene id, solo tiene name.

Otra cosa, this.checked no es válido en ese contexto, siempre será false, debes pasarle como parámetro el checkbox.