How can I disable all elements inside a fieldset in jQuery?
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
What about using the children selector?
$("#myfieldeset").children().attr("disabled", "disabled");
You can also filter the children selection:
$("#myfieldeset").children("a,input");