How can I disable all elements inside a fieldset in jQuery?

Question

I have 2 <fieldset>s on my page, but one of them should have all of it elements disabled depending on some user's choice.

The fieldsets contain text inputs, selects, and links. Is there a way to disable all of them instead of disabling them one by one?

score 26 · Accepted Answer · edited Mar 20 '12 at 13:44

26

What about using the children selector?

$("#myfieldeset").children().attr("disabled", "disabled");

You can also filter the children selection:

$("#myfieldeset").children("a,input");

edited Mar 20 '12 at 13:44

Fenton

241,084
71
387
401

answered Apr 23 '09 at 13:07

kgiannakakis

103,016
27
158
194

Thanks!! I used something similar but your explanation will be useful for other thing I have t do! :-) – André Miranda Apr 23 '09 at 13:12
7

as of jquery 1.6, [it's recommended to use `.prop()` instead of `.attr()` to set the value of properties](http://api.jquery.com/prop/#prop2), this can be like: `.prop("disabled", true)` – Roy Ling Jan 24 '13 at 05:53
1

I noticed that if the parent fieldset element is disabled, then all child elements will be disabled, even if there is fieldset element which is enabled. Is this a bug of feature? – tarekahf Apr 10 '17 at 18:06

Zach Lysobey · Answer 2 · 2019-12-09T22:43:24.467

You can set the disabled attribute of fieldset.

From MDN:

If this Boolean attribute is set, the form controls that are its descendants, except descendants of its first optional element, are disabled, i.e., not editable. They won't receive any browsing events, like mouse clicks or focus-related ones. Often browsers display such controls as gray.

HTML: <fieldset disabled> ... </fieldset>

JQuery: $('#myfieldset').prop('disabled', true);

JS: document.getElementById('#myFieldset').disabled = true;

IE note:

This does not work quite right on Internet Explorer due to a couple bugs, but works well just about everywhere else (including Edge).

In short, Text and File inputs don't properly disable, and the user can still interact with them.

If this is a deal breaker, you need to go into the and put the disabled attribute on the <fieldset>'s descendant form controls as described in other answers here.

Browser support info: http://caniuse.com/#feat=fieldset-disabled

franzlorenzon · Answer 3 · 2012-11-30T09:44:38.297

3

Why don't you just use:

$("#myfieldeset").attr("disabled", "disabled");

It worked for me. It disabled nicely all the children inputs.

EDIT: note thas the disabled attribute can be applied to fieldset element only in HTML5 (see merryprankster comment). Strangely enough, it does work with other browser than just Firefox and Opera, such as Chrome and Internet Explorer (tested IE7 and IE8).

edited Nov 30 '12 at 09:44

answered Nov 05 '12 at 14:45

franzlorenzon

5,845
6
36
58

No. The disabled attribute dates back to html 4. Source: [disabled attribute](http://www.w3schools.com/tags/att_input_disabled.asp) – franzlorenzon Nov 29 '12 at 09:19
2

is not . Your link is about elements;
s do not have `disabled` attribute prior HTML5 (and support seems to be very limited). [Source](http://w3schools.com/HTML5/att_fieldset_disabled.asp)
– merryprankster Nov 29 '12 at 20:00
Thanks, I didn't know that. I'll do some testing with other browser, just to see if it the approach would work with older ones – franzlorenzon Nov 30 '12 at 09:10
1

Working: firefox 16, chrome 22, IE7, IE8. Not working: safari 5, firefox 3. – franzlorenzon Nov 30 '12 at 09:39

score 3 · Answer 4 · edited Aug 29 '14 at 10:24

3

In addition to what others posted:

Use .prop() instead of .attr():

$('#myfieldset').prop('disabled',true)

It is more correct with regard to the DOM.

And it does not seem to work well with validation. Both firefox and chrome won't let me submit the form With unfilled 'required' inputs in the disabled fieldset, but don't give any instructions on how to complete the form either.

edited Aug 29 '14 at 10:24

Reporter

3,897
5
33
47

answered Aug 29 '14 at 10:18

user729356213908560

31
1

score 3 · Answer 5 · answered Apr 23 '09 at 13:08

3

Assuming you set a class="disableMe" on the fieldset you want to disable any input elements then the following code should do what you need:

$('fieldset.disableMe :input').attr('disabled', true)

answered Apr 23 '09 at 13:08

pjesi

3,931
3
20
16

score 0 · Answer 6 · answered Apr 23 '09 at 13:15

0

If for some reason you can't add an ID to the fieldset (which is usually preferred), you can always do this to hide all it's children elements:

$('fieldset:first > *').attr('disabled','disabled');

answered Apr 23 '09 at 13:15

KyleFarris

17,274
5
40
40

How can I disable all elements inside a fieldset in jQuery?

6 Answers6

Linked