Set a People Picker Control as Read-Only without the Ability to edit or delete user

Question

_{Tuesday, August 1, 2017 6:28 PM}

Hello,

I'm trying to Set a People Picker Control as Read-only without the ability to edit or delete user with JQuery.

Thanks,

Mike

SharePoint Engineer - Mike

All replies (11)

_{Wednesday, August 2, 2017 3:08 AM ✅Answered}

Hi Mike,

Add the script below using SharePoint Designer into the list edit form under PlaceHolderMain:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(disablePP, 1000);
});

function disablePP()
{
  //hide x image
  $(".sp-peoplepicker-delImage").hide();
  //disable peoplepicker control
  $("input.sp-peoplepicker-editorInput[title='PersonEditer']").prop('disabled', true);
  
  //set disable css style
  $("div.sp-peoplepicker-topLevel[title='PersonEditer']").addClass("sp-peoplepicker-topLevelDisabled");
}
</script>

Replace the field title with yours in the code above, in this test, the field title is PersonEditer:

Thanks

Best Regards

Please remember to mark the replies as answers if they help.
If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

---

_{Thursday, August 3, 2017 3:05 AM ✅Answered}

The x still shows after I refresh the page. What action does the code below perform?

$(document).ready(function() {
setTimeout(disablePP, 1000);
});

SharePoint Engineer - Mike

---

_{Friday, August 4, 2017 2:50 AM ✅Answered}

Hi Mike,

This solution is necessary with SetTimeOut function, it will resolve to hide  "x" icon.

Thanks

Best Regards

Please remember to mark the replies as answers if they help.
If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

---

_{Tuesday, August 1, 2017 6:36 PM}

Hi Mike,

Here is your answer. Call the below function for disabling the People Picker. Hope this helps you:

function disablePeoplePicker(rowid) {
    $("#" + rowid + " input").attr('disabled', true);
    $("#" + rowid + " textarea").attr('disabled', true);
    $("#" + rowid + " [id$='browse']").css("display", "none");
    $("#" + rowid + " [id$='upLevelDiv']").attr('disabled', true);
    $("#" + rowid + " div[id$='upLevelDiv']").attr("contentEditable", false);
}

Or use this one:

$("div[id$='_UserField_upLevelDiv']").attr("contentEditable", false);
$("span[id$='_UserField']").find("img").hide();

Please click the "Mark as Answer" button if this post solves your problem or "Vote As helpful if it was helpful! :)

---

_{Tuesday, August 1, 2017 6:41 PM}

One more option:

<script type="text/javascript" src="../../jquery/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var columnName = 'Name'; 
 var searchText = RegExp("FieldName=\"" + columnName + "\"", "gi");
 $("td.ms-formbody").each(function() {
        if(searchText.test($(this).html())) {        
           $(this).find("div[Title='People Picker']").attr("contentEditable",false);
           $(this).find("a[Title='Check Names']").hide();
           $(this).find("a[Title='Browse']").hide();     
       }
   });
}); 
</script>

Please click the "Mark as Answer" button if this post solves your problem or "Vote As helpful if it was helpful! :)

---

_{Tuesday, August 1, 2017 6:55 PM}

Maruthachalam,

This did not work. The x is still there to delete the user.

SharePoint Engineer - Mike

---

_{Tuesday, August 1, 2017 7:07 PM}

Did not work. The 'x' still allows me to delete the user.

SharePoint Engineer - Mike

---

_{Thursday, August 3, 2017 3:19 AM}

Hi Mike,

setTimeout function will delay the disable person editor control after 1 second when document ready.

Because x icon will be loaded after the html dom loaded, so add the setTimeout like above, it will hide the x icon as expected, you can try it in your environment to test if it works.

More information:

https://www.w3schools.com/jsref/met_win_settimeout.asp

Thanks

Best Regards

Please remember to mark the replies as answers if they help.
If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

---

_{Friday, August 4, 2017 2:42 AM}

Hi Mike,

How is everything going ? Did you try my code snippet above ?

Thanks

Best Regards

Please remember to mark the replies as answers if they help.
If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

---

_{Friday, August 4, 2017 2:45 AM}

Yes. I tried it without the Timeout and the x shoes. I will try it with the Time out portion.

SharePoint Engineer - Mike

---

_{Wednesday, August 9, 2017 1:02 AM}

Hi Mike,

Did you need any furthur help on this question ?

Thanks

Best Regards

Please remember to mark the replies as answers if they help.
If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com