Shaun Mccran

My digital playground

23
D
E
C
2010

Using JQuery to disable all form fields

Whilst writing a new timesheet application I added a function to 'lock' an entire dataset, IE stop a user from editing the form on the page.

I'd spent a lot of time layout the timesheet page, designing the form, and help text etc. I didn't really want to destroy the visuals if a record was locked, I wanted it just the same, but 'non-active'.

This is where JQuery is simply awesome. Understanding 'selectors' and the power they can give you, with only very simple construction is key.

In this example imagine a page that has a div within it, the div has a id of 'divLabel'. Within that div there is a form. The code below will disable all the input elements within that div. Every single one of them. In one line of code. How cool is that.

view plain print about
1<s/cript type="text/javascript">
2    $(document).ready(function(){
3        $('#divLabel :input').attr('disabled', true);
4    });
5    // end
6</script>

What its actually doing is adding the disabled attribute to each input, then setting the value to 'true'.

Get familiar with how JQuery selectors work, the docs are here: http://api.jquery.com/category/selectors/

TweetBacks
Comments
Back to top