Esta semana me enfrente a la necesidad de poner un control checkbox en HTML que no pudiera ser cambiado por el usuario. Inicialmente pensé que era fácil ya que supuse que al usar el atributo readonly este funcionaria como lo esperaba; más no fue así.

Veamos lo que pasa al poner el atributo a un campo del tipo text:

<input type="text" name="fieldName" value="Field Value" readonly="readonly"/>

Campo:

El atributo readonly actúa para que no podamos editar su contenido, ademas de ser tenido en cuenta al momento del envio a diferencia del atributo disabled en el que será excluido al enviar el formulario. Ahora veamos que efecto tiene el atributo readonly sobre un campo de tipo checkbox:

<input type="checkbox" name="fieldName" value="Check Value" readonly="readonly" checked/>

Checkbox:

readonly no tiene ningún efecto sobre este tipo de campo. Para solucionar esto tendremos que acudir al javascript así:

<input type="checkbox" name="fieldName" value="Check Value" readonly="readonly" checked onclick="javascript: return false;"/>

Checkbox:

O si queremos una solución más elegante que no ensucie nuestro código HTML con Javascript, a través de jQuery podemos implementar la siguiente función:

$(document).ready(function(){
	$(':checkbox[readonly=readonly]').click(function(){
		return false;         
	}); 
});