Disable multiline and single line textbox in SharePoint using jQuery

by
Leave request management and approval

This SharePoint tutorial, explains how to disable or make read-only to multiline textbox and single-line textbox in SharePoint 2010/2013/2016 using jQuery. We will make this is Edit form in the SharePoint list. You can also do the same in SharePoint new list form.

Complete SharePoint Training Course Just for $199 (Just for Today)

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

By default it comes like below:

Disable multiline textbox using jQuery in SharePoint 2010
Disable multiline textbox using jQuery in SharePoint 2010

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

Ex:

  • /EditForm.aspx?ToolPaneView=2
  • Add a Content Editor Web Part
  • 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:

Disable multiline textbox using jQuery in SharePoint 2013
Disable multiline textbox using jQuery in SharePoint 2013

You may like following SharePoint tutorials:

This tutorial, we learned how to disable multiline and single line textbox in SharePoint using jQuery.

>