Unable to set a People or Group field as Read-Only inside our edit form

Question

I have a custom list inside sharepoint online site, and inside the list's Edit form i want to disable a People or Group field named "Project Manager" using jQuery, but i am not sure if this is possible, here is a screen shot of the markup:-

now i already have a jQuery function added to my Edit form inside a script editor web part, and i am able to disable some Input and Select fields using the below code, but not sure how i need to disable the People or Group fields? as seems they do not have any input as shown in the above markup..

$(function() {

      $("input[id^='ProjectEstimatedDate_']").attr('disabled', 'disabled');
      $("select[id^='ProjectPriority_']").attr('disabled', 'disabled');
      //code goes here for other input and select fields
    });

Edit. I tried the script mentioned in @LZ_MSFT reply, where the field will not allow the user to type in (which is good), but the user can remove the current user by clicking on the "X" icon, as follow:-

now when i run the script inside the browser console after the page loaded, the script was able to completely disable the field, and we will not be able to remove the current user. so do i need to delay executing the script for it to completely disable the field (as seems the script will work fine when i run it inside the browser console) ?

Answer 1

The following code for your reference.

<style>
a[id^='ProjectProjectManger'].sp-peoplepicker-delImage{
    display:none;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var dispTitle = "Project Manager";
        var pickerDiv = $("[id$='ClientPeoplePicker'][title='" + dispTitle + "']");
        var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerDiv[0].id];
        //disable the field
        peoplePicker.SetEnabledState(false);
    });
</script>

Answer 2

There is a way to resolve your problem. At first you select people picker cross icon using jQuery, then hide it. After that select the input box within people picker box and hide it too. Sample code is given below

$(".sp-peoplepicker-delImage").hide() // for hiding cross icon
$(".sp-peoplepicker-editorInput").hide() // for hiding input field

---

If the answer is helpful, please upvote.