Disable all form controls on a web page

Question

What is the nicest way to disable all form controls on a web page? I have read that this cannot be done via CSS but this would be my preferred option if possible. I also have access to jQuery if that makes life easier.

Answer 1

$("form :input").attr("disabled","disabled");

:input selects all form controls, including input, textarea, select and button elements.

If you want to disable form elements that are outside of forms too, simply omit the 'form` selector from the above.

Answer 2

@karim79 is right with his CSS selectors, but convention calls for the jquery .prop() function (see docs here).

So I suggest...

$("form :input").prop("disabled",true);

Here is a similar situation where the .prop() function is appropriate.

Hope this helps!