0

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:-

enter image description here

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:- enter image description here

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) ?

2 Answers 2

2

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>

enter image description here

2
  • thanks a lot for your reply and help, i updated my question with the result i got when i used the script mentioned in your reply,,, where it partially worked for me,, So can you please check my Edit and advice on it. thanks again for your help..
    – John John
    Oct 28, 2019 at 3:20
  • I already update the reply, you can check it, we can use CSS to hide the "X" image.
    – LZ_MSFT
    Oct 28, 2019 at 4:42
0

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.

3
  • but this code will disable all the "People & Group" fields, and not just the intended ones.. is this correct?
    – John John
    Oct 28, 2019 at 2:54
  • I saw you have a id for people picker "ProjectProjectManager_*". You can select this parent div then traverse child element and hide them. In that case others people picker will not be affected. Oct 28, 2019 at 6:31
  • If you need the code how to select child element for the desired parent element, just let me know I will provide you. Oct 28, 2019 at 6:36

Your Answer

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

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