SharePoint 2010 – set fields read only or hidden

An updated version of this article can be found here:


1) Set some fields “read only” in “Edit” modal windows of a list item.
2) Hide some fields in “New”, “Display” and “Edit” modal windows.


SharePoint 2010 site
base of javascript
SharePoint Designer that can access to site


The example is based on a custom list (“Protocol”). I start with an example that use “inline” javascript, and then some words on better approach with external javascript inclusion.
Start the work. Open with SharePoint Designer the “EditForm.aspx” of the list and in advanced mode. You MUST use “Edit in advanced mode” by right click menu to be enabled to changing everything in the .aspx).
Search the “PlaceHolderAdditionalPageHead” id tag in the page:

javascript place in SharePoint 2010

Insert this excerpt of code after the row with “<SharePoint:CssRegistration Name=”forms.css” runat=”server”/>”:

<!-- customization 1 -->
<script type="text/javascript" src=""></script>

<script type="text/javascript">
var $headers;   //collection of field labels
function getFieldRow(displayName) {
   if (!$headers)
       $headers = $('');

   var $header = $headers.find(':contains("'+displayName+'")'); // parent of <nobr>
       return $header.parents('tr')[0]; // first ancestor 'tr'
       return null;  // not found

   // example of header with mandatory symbol
   // <nobr>Title<span class="ms-formvalidation" title="This is a required field."> *</span></nobr>  

function setReadOnly(displayName) {
   var row = getFieldRow(displayName);
   if (!row)
       alert("Field \"" + displayName + "\" not found.");

   var $input = $(row).find('input[type="text"]');   // find the text box

   var text = $input.val();
   $input.hide()                     // remove also field description
   $( $input.parents('td')[0] ).text(text);   

function hideField(displayName) {
   var row = getFieldRow(displayName);
   if (!row)
       alert("Field \"" + displayName + "\" not found.");


//call to “hide” and “set read-only” functions
$(function () {       // short-hand for $(document).ready()
   hideField("Field 1");
   hideField("Field 2");
   setReadOnly("Field 3");
   setReadOnly("Field 4");

The first operation is for including an external jQuery file.

I’ve used the Microsoft CDN but you can use the local (“LAYOUT” folder) file or another CDN ( ref:

The second part is the definition af the function that search the row (TR) where field is rendered (“getFieldRow”). It search the field by its “display name”, so you have to check out for language pack or different localization.

The function return null if field is not found. Is your work to check for this.

The other functions (“setReadOnly” and “hideField”) are self explanatory. This simple version of “setReadOnly” works only on “text” type imput controls.

The last part is final call of functions on page fields. Calls are made after DOM is full loaded (jQuery “ready()” on “document”), so all controls exists in the document.

It hide “Field 1” and “Field 2” (in the example “”) (in the example “Year” and “Counter”)

My form in “New” visualization is this:

and in original “Edit” mode:

This is the result of customization:

Note that the field description (in “Counter” field) is removed too.

The above example use a “inline scripts” approach. Of course a better way is to register the function in a external javascript file that can be used all the time we need, and obviously make code more simple to change, and page more light. Also for this purpose I’ve separate the code in more than a unique function, to make code more reusable.
When the javascript is in a external file we can use only this code to make all the work (note the inclusion of “my_project.js”):

<!-- customization 4 -->
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="/_layouts/My_Customer/JS/my_project.js"></script>   
<script type="text/javascript">
    $(function () {
        setReadOnly("All Day Event");