Question: How to disable all html form elements within a DIV tag using JQuery?

 

NOTE: Please not that the prop JQuery function should be used instead of the attr function in JQuery 1.6 and higher

 

Answer

To disable all input elements within div use the following code: 
$('#message :input').attr('disabled', true);

To disable all select elements within div use the following code: 
$('#message :select').attr('disabled', true);

To disable all submit buttons within div use the following code: 
$("#message :submit").attr("disabled", "true");

Explanation:

  • The DIV tags ID is message    
  • attr- Access a property on the first matched element.
  • $("selector")
  • If disabled is set to false the element won't be disabled
The jQuery docs say to use prop() for things like disabled, checked, etc. Also the more concise way is to use their selectors engine. So to disable all form elements in a div or form parent.

$myForm.find(\':input:not(:disabled)\').prop(\'disabled\',true)
VOTES:-1
Ken Collins wrote:
The jQuery docs say to use prop() for things like disabled, checked, etc. Also the more concise way is to use their selectors engine. So to disable all form elements in a div or form parent.

$myForm.find(\':input:not(:disabled)\').prop(\'disabled\',true)

I a matter of fact it was not wrong prior to JQuery 1.6 when this article got written, but thank you for pointing it out. If JQuery 1.6 or higher is used then the prop method is the one to use.
VOTES:0
Thanks i got my solution by this post.
VOTES:0
awesome code
VOTES:1
I created a widget that can completely disable or present a read-only view of the content on your page. It disables all buttons, anchors, removes all click events, etc., and can re-enable them all back again. It even supports all jQuery UI widgets as well. I created it for an application I wrote at work. You\'re free to use it.

Check it out at ( www.dougestep.com/dme/jquery-disabler-widget ).
VOTES:0