3

I want to simply disable a text field (specifically a "person/group" field text box) from being editable on the edit form page of my list item. I have it working in IE using a Content Editor Web Part with javascript using:

document.getElementById('myDivID').setAttribute("disabled","disabled");

This jQuery works as well in IE:

$('#myDivID').attr('disabled', 'disabled');

But neither of these work in Chrome or Firefox. The field is still editable in those browsers.

EDIT: Tried the suggestion of wrapping a CSS class around the div and disabling the class, but it still doesn't seem to work. Attempted code here:

var disableElement = $('#myDivID');

if(disableElement) {
    disableElement.className = 'setDisabled';
}

$(".setDisabled:input").attr('disabled', true);

The class assignment looks to be working, but the last line seems to do nothing.

Improve this question
3
  • I did an additional related experiment. Trying to disable any input field on the form, I used $(":input").attr("disabled", 'disabled'); This resulted in all the fields being disabled EXCEPT for the person/group text boxes! Are these fields not actually input fields after all?
    – Alex
    Mar 25, 2013 at 20:37
  • Just checked in SP2010 using IE and it is a DIV not an INPUT.
    – Dave Paylor
    Mar 25, 2013 at 20:45
  • All right, thank you for clarifying. But I did try disabling the div per my code above and the problem still remains.
    – Alex
    Mar 25, 2013 at 20:51

2 Answers 2

Reset to default
1

I had same kind of problem while trying to disable controls using jQuery but atlast I made it work and made a post about it on my blog,

http://sharepointbulletin.blogspot.co.uk/2013/03/disabling-controls-within-css-class.html

$(".myCSSClassName:input").attr('disabled', true); //this one only worked for me, 
//for all of browsers

$('input.myClass').click(function(e){
    e.preventDefault();
})


$('input.myClass').attr('disabled', '');

$("input.myClass").prop("disabled", true);

$('input.myClass').attr('disabled', 'disabled');

Edit

You can add class to div as,

<div id="myDivID" class="myDivID"></div>

For more information check this link out.

Improve this answer
9
  • Thanks, but can you explain how I would get the css class of the person/group div, since I am currently trying to use its "ID". Sorry, I am a CSS noob.
    – Alex
    Mar 25, 2013 at 20:52
  • I updated my answer but in your div, just add another attribute named as class.
    – Muhammad Raja
    Mar 25, 2013 at 21:01
  • Thanks. I tried your suggestion but it still doesn't work in Chrome. Please see my edited question for the code I tried.
    – Alex
    Mar 25, 2013 at 23:17
  • Can you create a fiddle of it on jsFiddle, jsfiddle.net
    – Muhammad Raja
    Mar 26, 2013 at 8:09
  • Try this: jsfiddle.net/2fy3W
    – Alex
    Mar 26, 2013 at 17:32
1

Rather than expecting some code you've grabbed from somewhere to do this, you should use the IE Developer Tools or Firebug or the Chrome tool to look into the DOM to determine what needs to be disabled. Quite a few of the column types are rendered differently in IE than they are in other browsers. The only way you'll get a reliable result is to understand what is going on and writing code to cover those specifics.

Also note that if you disable a column, then its contents will not be written to the underlying item. Here's a post of mine that explains this and how to get around it: http://sympmarc.com/2010/10/08/using-jquery-to-prefill-and-disable-required-column-in-a-sharepoint-form/

Improve this answer
3
  • Thanks Marc. My first attempts to disable (which worked in IE) were my own code. I only checked other sites when I was unable to get it working after using Chrome Developer Tools extensively. I was finally able to code the solution anyway, although none of the strategies presented here were close to the correct answer. The problem here was that the field is not an input field, but a People Picker, so the article you referenced would work well normally, but in my case I had to set display styles of specific nodes in the DOM.
    – Alex
    Mar 26, 2013 at 1:55
  • 1
    These more complex controls in SharePoint are made up of multiple HTML elements tied together with script. This means that you need to look at the live DOM to see what's going on.
    – Marc D Anderson
    Mar 26, 2013 at 3:22
  • That is also part of the problem though. The DOM that is generated by SP is so complex as to be pretty unfriendly to parse by eye. But good suggestion for future problems like this!
    – Alex
    Mar 26, 2013 at 4:27

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.