Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
    
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 '13 at 20:37
    
Just checked in SP2010 using IE and it is a DIV not an INPUT. –  Dave Paylor Mar 25 '13 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 '13 at 20:51
add comment

2 Answers

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.

share|improve this answer
    
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 '13 at 20:52
    
I updated my answer but in your div, just add another attribute named as class. –  Muhammad Raja Mar 25 '13 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 '13 at 23:17
    
Can you create a fiddle of it on jsFiddle, jsfiddle.net –  Muhammad Raja Mar 26 '13 at 8:09
    
Try this: jsfiddle.net/2fy3W –  Alex Mar 26 '13 at 17:32
show 4 more comments

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/

share|improve this answer
    
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 '13 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 '13 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 '13 at 4:27
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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