I am trying to make people picker column in my list edit form "Read-only". I found many solutions that worked on SharePoint 2010 but couldn't find a reliable solution for SharePoint 2013/Office 365.

It would be great if someone can point me to a good solution.

Thank You!

6 Answers 6


I just gave an answer here, but i suppose it will work here too.

To make People picker readonly, you can use the below JQuery code:

$(".sp-peoplepicker-delImage").css({ 'display' : 'none'});
$(".sp-peoplepicker-editorInput").css({ 'display' : 'none'});

You can also apply them with the help of css:








This is the easiest and fastest way to make people picker fields read only in SharePoint

2013/online, but it will make every people picker field on the form read only. So please let me know if you want for a specific column.

  • 2
    How can we disable specific people picker field in SharePoint Online new form ? Thanks in advance.
    – Sid
    Apr 6, 2018 at 9:11
  • Same - now does not work for Online, 2018 April
    – Gennady G
    Apr 19, 2018 at 9:29

Using display:none makes the form look weird and isn't the right approach, it could still be modified. I would actually use the disabled attribute to disable the fields:

$(".sp-peoplepicker-editorInput").attr('disabled' , 'disabled');

This way it still looks the same and is disabled.

  • I guess, you are right but I liked the no Jquery solution, where only CSS worked. I applied it and the form was perfect no weirdness. Thanks for your help and time. :)
    – iStrange
    Jun 18, 2015 at 12:59
$(".sp-peoplepicker-delImage").css({ 'display' : 'none'});
$(".sp-peoplepicker-editorInput").attr('disabled' , 'disabled');

This works for me !!!


I usually use the following to deactiveate a people picker field (and make it actually look "deactivated" as well)...

$(this).find('.sp-peoplepicker-editorInput').prop("readonly", true);
$(this).find('.sp-peoplepicker-editorInput').prop("disabled", true);
$(this).find('.ms-entity-resolved').attr('style', 'cursor: text;');
$(this).find('.sp-peoplepicker-autoFillContainer').parent().attr('style', 'color:#b1b1b1;');
$(this).find('.sp-peoplepicker-delImage').each(function() {
$(this).prop("readonly", true);
$(this).prop("disabled", true);

*$(this) is the topelevel div of the field (class is "sp-peoplepicker-topLevel") *


The approved answer and the other CSS tricks didn't worked for me (in custom edit form).

I was able to achieve this by removing the table tbody which contains the people picker control and writing the user name into the table. ( I just wanted to make the first people picker in the custom edit form as read only. That's why index 0 )

$("table[id$='UserField_OuterTable'] tbody")[0].remove();
var markup = $("input[id$='HiddenEntityDisplayText']")[0].value;

In default edit form , need to put the code (approved answer) inside

SP.SOD.executeFunc('clientpeoplepicker.js', 'SPClientPeoplePicker', function (){});


SP.SOD.executeFunc('clientpeoplepicker.js', 'SPClientPeoplePicker', function ()
       $("[class='sp-peoplepicker-delImage']").css({ 'display' : 'none'});
       $("[class='sp-peoplepicker-editorInput']").css({ 'display' : 'none'});  

try following it worked for me:

$('div[title="People Picker"]').attr("contenteditable", false);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.