Disable SharePoint Field Using JQuery

Disable SharePoint Field Using JQuery in SharePoint 2016

In this post, we’ll explain How to hide and disable and set a SharePoint field as read-only using JQuery in SharePoint forms.


How to Disable SharePoint Field Using JQuery?

Here, we’ll mainly concentrate on learning how to hide and disable SharePoint Field using JQuery in SharePoint forms for the below fields:

  • TextBox Field.
  • Choice Field.

If you would like to disable multiline text box field, you can check the below articles:

Set SharePoint Field as Read-Only in Edit Form

In my secnario, I have a custom list “Project Tasks” with content type enabled, In this content type, I have a sing line of text box column called “Project Name”.

Set field as Read-only in SharePoint forms

I would like to disable and set a SharePoint field as read-only when editing or adding a new list item as shown below:

Disable SharePoint Field Using JQuery
Disable SharePoint Field Using JQuery

Disable SharePoint Text Field on Edit Form using JQuery

Steps

  • Open your list.
  • From the above ribbon, Click on the List tab.
  • In “Customize List”, Click on “Form Web Parts”.
  • Select “Default Edit Form” to customize the default edit form.
Default Edit Form in SharePoint
  • Click on Add new Web Part.
  • In the Media and Content” category, Add Script Editor web part.
Add Script Editor in SharePoint 2019
  • Click on “Edit Snippet“.
Disable Text Field in Edit Form | Edit Snippet
  • Add the below code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//Disable single line text box in SharePoint
  $("input[title='Project Name']").attr('disabled', 'disabled');
}); 
</script>

Don’t forget to replace the above code with your field name at this line $(“input[title=’your field name’]”)

  • Stop Editing your page.
  • Go back to edit your item.
  • The SharePoint Column would be disabled successfully as shown below.
Read Only Single Line of Text Content Type Column in Edit Form In SharePoint
Textbox – Disable SharePoint Field Using JQuery

Disable SharePoint Choice Field on Edit Form using JQuery

Steps

  • Open your list.
  • From the above ribbon, Click on the List tab.
  • In “Customize List”, Click on “Form Web Parts”.
  • Select “Default Edit Form” to customize the default edit form.
Default Edit Form in SharePoint
  • Click on Add new Web Part.
  • In the Media and Content” category, Add Script Editor web part.
Add Script Editor in SharePoint 2019
  • Click on “Edit Snippet“.
Disable Text Field in Edit Form | Edit Snippet
  • Add the below code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"
       type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//Disable single line text box in SharePoint
  $("select[title='Project Name']").attr('disabled', 'disabled');
}); 
</script>
  • Stop Editing your page.
  • Go back to edit your item.
  • The SharePoint Column would be disabled successfully as shown below.
Disable Choice Field in Edit Form in SharePoint
Choice field – Disable SharePoint Field Using JQuery

Don’t forget to replace the above code with your field name at this line $(“select[title=’your field name’]”)

You may also like to read Show / Hide fields based on choice field selection using JQuery in SharePoint.

Disable Required Field On Edit Form Using JQuery In SharePoint

If your field is a required field, so you should use “^” at the below line

$("input[title^='Project Name']").attr('disabled', 'disabled');

Final Script: Set Required Field as Read-Only in SharePoint Forms

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"
       type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//Disable single line text box in SharePoint
  $("input[title^='Project Name']").attr('disabled', 'disabled');
}); 
</script>

For choice field, just change “input” to “select” at $(“input[title^=’your field name’]”)


Hide SharePoint Field Using JQuery

In this section, we’ll learn how to hide SharePoint Field using JQuery.

Hide Text Field in SharePoint Edit form

Steps

  • Open your list.
  • Edit an Item.
  • From the top right setting gear, select “Edit Page”.
Edit Page in SharePoint
  • Click on Add new Web Part.
  • In the Media and Content” category, Add Script Editor web part.
Add Script Editor Webpart
  • Click on “Edit Snippet“.
Disable Text Field in Edit Form | Edit Snippet
  • Add the below code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"
       type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//Disable single line text box in SharePoint
  $("input[title='Project Name']").closest('tr').hide(); 
}); 
</script>

Don’t forget to replace the above code with your field name at this line $(“input[title=’your field name’]”)

Hide Choice Field in SharePoint Edit form

Steps

  • Open your list.
  • Edit an Item.
  • From the top right setting gear, select “Edit Page”.
Edit Page in SharePoint
  • Click on Add new Web Part.
  • In the Media and Content” category, Add Script Editor web part.
Add Script Editor Webpart
  • Click on “Edit Snippet“.
Disable Text Field in Edit Form | Edit Snippet
  • Add the below code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"
       type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//Disable single line text box in SharePoint
  $("select[title='Project Name']").closest('tr').hide(); 
}); 
</script>

Don’t forget to replace the above code with your field name at this line $(“select[title=’your field name’]”)


Hide Column In SharePoint Forms using PowerShell

You can also use SharePoint Power-Shell to hide a field in

  • New Form (ShowInNewForm).
  • Edit Form (ShowInEditForm).
  • Display Form (ShowInDisplayForm).

Note: The Power-Shell Script is not working for the system generated column like content type column

Add-PSSnapin "Microsoft.SharePoint.PowerShell"
$web = Get-SPWeb -Site http://debug.to/
$listname = "Project Tasks"
$fieldName = "Project Status"
$list = $web.lists | Where-Object { $_.title -Eq $listname } 
$list | Format-Table title,id -AutoSize
$field = $list.Fields[$fieldName] 
$field.ShowInEditForm=$false;
$Field.Update()

You might also like Show and Hide Columns in SharePoint List Forms Using PowerShell.


Conclusion

In this post, we have learned how to disable SharePoint field using jQuery, and we have provided a code to disable and hide a Text box field and choice field in SharePoint forms.

Applied To

  • SharePoint 2019.
  • SharePoint 2016.
  • SharePoint 2013.
Download

You can also explore other JS snippet SharePoint on GitHub. Please, don’t forget to Follow Me to get the latest updates.

You might also like to read
Have a Question?

If you have any related questions, please don’t hesitate to ask it at deBUG.to Community.

2 thoughts on “Disable SharePoint Field Using JQuery”

  1. Pingback: To Edit A Field

Leave a Reply