locked
Disable fields using Jquery in sharepoint 2013 RRS feed

  • Question

  • I would like to disable "Multiple line of text" & "People Picker" fields using Jquery(not Javascript) from New Form. Any suggestions would be highly appreciated. Thank you

    Ramanjulu Naidu N



    Wednesday, December 24, 2014 7:22 PM

All replies

  • Hi Ramanjulu,

    Edit the “new” or “edit” of a ListItem (NewItem.aspx and EditItem.aspx)
    It is the same jQuery code that goes for the new item page and the edit item page.

    Edit a ListElement, thus letting you view the EditForm.aspx page or
    Add a Listelement, thus letting you view the NewForm.aspx page
    Edit the page (not the content)
    Add the Scripteditor webpart
    Insert the code in the webpart and remember to edit the “CaseID” to whatever name your input field has
    view sourceprint?

    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>

    <script type="text/javascript" language="javascript">// <![CDATA[

    $(function() { $('input[title=CaseID]').parent().parent().parent().hide(); }); // ]]></script>

    Edit the “view” of a ListItem (DispForm.aspx)
    Open an element on the list, thus letting you view the DispForm.aspx page
    Edit the page (not the content)
    Insert the Scripteditor webpart
    Insert this code in the webpart and remember to edit the “SPBookmark_CaseID” to “SPBookmark_” + whatever name your field has

    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script><script type="text/javascript" language="javascript">// <![CDATA[
    
    $(function() {
     $('a[name=SPBookmark_CaseID]').parent().parent().parent().hide();
    });
    // ]]></script>

    Hope this will help you


    Please 'propose as answer' if it helped you, also 'vote helpful' if you like this reply.

    Wednesday, December 24, 2014 10:09 PM
  • You can also look at this - Hiding SharePoint Fields Using jQuery

    Please 'propose as answer' if it helped you, also 'vote helpful' if you like this reply.

    Wednesday, December 24, 2014 10:10 PM
  • Hi,

    From your description, I know you want to disable "Multiple line of text" & "People Picker" fields when you add an item.

    You can try code as below to hide these two fields:

    <script type="text/javascript" src="/code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("div[id^=CustomTitle]").hide(); //hide the "Multiple line of text" fields
    $("div[title=CustomTitle]").hide(); //hide the "People Picker" fields
    })
    </script>
    

    Please replace CustomTitle with field name. The screenshot below is my result(in my case, I set the first CustomTitle to Multiple, the second CustomTitle to Person):

    Regards,


    Rebecca Tu
    TechNet Community Support

    Friday, December 26, 2014 9:35 AM
  • Hi Rebecca, Thank you for your reply, will it hide or disable? I want to just disable.



    Friday, December 26, 2014 10:14 AM
  • Hi Ramanjjilu Naidu. N,

    Taking the code of Rebecca, you can try to add .attr("disabled", "disabled"); which disable your fields.

    <script type="text/javascript" src="/code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("div[id^=CustomTitle]").attr("disabled", "disabled"); //Disable the "Multiple line of text" fields
    $("div[title=CustomTitle]").attr("disabled", "disabled");  //Disable the "People Picker" fields
    })
    </script>
    Please try and let us know


    Please 'propose as answer' if it helped you, also 'vote helpful' if you like this reply.

    Friday, December 26, 2014 11:35 AM
  • Hi Sudip,

    I have tried with your given solution which is not working as i expected. My code as follows.

    $("div[id^ = Multiple]").attr("disabled", "disabled");
    $("div[title=User]").attr("disabled", "disabled");  


    Ramanjjilu Naidu

    Friday, December 26, 2014 11:53 AM
  • Try this as well, also remove space after and before = in Multiple

    .attr("disabled", true)


    Please 'propose as answer' if it helped you, also 'vote helpful' if you like this reply.

    Friday, December 26, 2014 12:24 PM
  • Not working Sudip.

    $("div[id^=Multiple]").attr("disabled",true);
    $("div[title=User]").attr("disabled",true);


    Ramanjjilu Naidu


    Friday, December 26, 2014 12:29 PM
  • Try this code. It is working in my environment with IE.(not in Chrome/Firefox)

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"></script><script type="text/javascript">
    $(document).ready(function(){
    $('input[title="MyPplPick"]').attr("disabled", "disabled");
    //hide the "People Picker" fields  
    $('div[id^="CustomText"]').attr("disabled", "disabled");  
    })//hide the "Multiple line of text" fields in IE
    </script>​​<br/>​​<br/>​<br/>

    My Column name are in below



    Please 'propose as answer' if it helped you, also 'vote helpful' if you like this reply.

    Friday, December 26, 2014 4:36 PM
  • Sorry Sudip, in IE also it is not working.

    $('input[title="Vendor contact"]').attr("disabled", "disabled");
    $('div[id^="Multiple"]').attr("disabled", "disabled");
    })
    </script>


    Ramanjjilu Naidu

    Friday, December 26, 2014 5:04 PM
  • It is not easy to disable textarea control in SharePoint for all browser (especially non IE browser <as of yet>)

    Please look at the answer from moitinho in this thread - Disable a Multi-Line Rich Text Field where he is reading old value then just Copy the value from the original control to the new textarea and, with javascript/jquery, you hide the original div and show the new div.

    Hope this will help


    Please 'propose as answer' if it helped you, also 'vote helpful' if you like this reply.

    Friday, December 26, 2014 5:17 PM
  • Another helpful link - Disable multiline textbox and single line textbox in SharePoint using jQuery

    Please 'propose as answer' if it helped you, also 'vote helpful' if you like this reply.

    Friday, December 26, 2014 5:38 PM
  • Hi Ramanjjilu,

    Please try the following script: 

    <script type="text/javascript" src="/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    var obj = $(".ms-formbody");
    obj[n-1].disabled = true;  // method to disable each kind of fields except Multiple line of text/Single line of text, ”n” is the position of the field
    $("div[id^=Multiple]")[0].innerHTML = "<div style='height:50px;'></div>"; // method to disable “Multiple line of text”
    })
    </script>
    

    Regards,



    Rebecca Tu
    TechNet Community Support

    Monday, December 29, 2014 2:54 AM
  • Thank you Rebecca, sorry to say this is also not working.

    Ramanjjilu Naidu

    Monday, December 29, 2014 10:36 AM
  • If possible, can you please delete "Vendor contact" column and recreate once again (preferably without space later on you can modify and add space but internal name still remain as it created first time)

    The reason I am asking to do that, as It is working at my environment(with IE).

    Can you also right click in chrome and do a inspect element to see what is the exact title that control is actually rendering. jQuery deserve exact name. 



    Please 'propose as answer' if it helped you, also 'vote helpful' if you like this reply.

    Monday, December 29, 2014 4:53 PM
  • $('input[title="Vendor contact"]').attr("disabled", "disabled");
    $('div[id^="Multiple"]').attr("disabled", "disabled");
    })
    </script>


    Hi Ramanjjilu,

    I tested your script code, it worked well in my IE environment.  I wonder if you have some JavaScript error when you ran the code in your environment. If you have some JavaScript error, may I know your error message? If there is not JavaScript error, could you tell me how do you add the script your script code in your environment?

    In addition, you could test it on other browsers?

    Regards,


    Rebecca Tu
    TechNet Community Support

    Friday, January 2, 2015 6:15 AM
  • Hi Rebecca,

    I am adding it in the designer, my code looks as below.

    <script type="text/javascript" src="    "></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('input[title="Vendor contact"]').attr("disabled", "disabled")
    $('div[id^="Multiple"]').attr("disabled", "disabled")
    });


    Ramanjjilu Naidu

    Friday, January 2, 2015 1:03 PM
  • Hi,

    To be on the safe side, you need to download jquery-2.1.0.min.js file and add file path in src to make it work, or directly refer to the original source via http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

    In addition, please notice js language is case sensitive.

    Regards,


    Rebecca Tu
    TechNet Community Support


    • Edited by Rebecca Tu Monday, January 5, 2015 1:49 AM
    Monday, January 5, 2015 1:34 AM