Disable multiline textbox and single line textbox in SharePoint using jQuery

In this post I will discuss how we can disable or make readonly to multiline textbox and single line textbox in SharePoint using jQuery. We will make this is Edit form in SharePoint list.

You can use SharePoint Designer to make a field read only. Here is a method to make a field readonly using Jquey  and a Content Editor Web Part Edit the EditForm.aspx page

By default it comes like below:

 

 

 

If the Edit Page option is missing from the Site Actions menu, use the ToolPaneView=2 URL parameter.

Ex: 

1. /EditForm.aspx?ToolPaneView=2

2. Add a Content Editor Web Part

3. Add the following code (in this example, “Question” is the name of my field):

 

Below is the jQuery Code:

 

$(document).ready(function () {

       

            ConvertTextboxToLable('Title');

            ConvertTextareaToLable('Description');

});

    //Convert TextArea to Lable

    function ConvertTextareaToLable(colName) {

        var txtHTML = $("textarea[Title='" + colName + "']").html();

        var tdColumn = $("textarea[Title='" + colName + "']").closest('td');

        var tdColumnHTML = $(tdColumn).html();

        $(tdColumn).html("<div style='display:none'>'" + tdColumnHTML + "'</div>");

        $(tdColumn).append(txtHTML);

    }

    //Convert Textbox to Lable

    function ConvertTextboxToLable(colName) {

        var txtHTML = $("input[type=text][Title='" + colName + "']").val ();

        var tdColumn = $("input[type=text][Title='" + colName +  "']").closest('td');

        var tdColumnHTML = $(tdColumn).html();

        $(tdColumn).html("<div style='display:none'>'" + tdColumnHTML +  "'</div>");

        $(tdColumn).append(txtHTML);

    }

After this, it will appear like below: