disable all form elements inside div

Question

is there a way to disable all fields (textarea/textfield/option/input/checkbox/submit etc) in a form by telling only the parent div name in jquery/javascript?

Note that by doing this you cause the values of those elements to "disappear" when submitting the form - to preserve the value make them `readOnly`, not disabled. — Shadow The GPT Wizard, Mar 13 '11 at 16:20
possible duplicate of [How to disable all div content](http://stackoverflow.com/questions/639815/how-to-disable-all-div-content) — Michel Ayres, Aug 13 '13 at 15:08
An Idea could be hide/show a div in front of the controls it allows/prevents from be clicked, plus style disabled controls with css. — Jaider, Oct 22 '13 at 22:02

score 287 · Accepted Answer · answered Mar 13 '11 at 16:14

287

Try using the :input selector, along with a parent selector:

$("#parent-selector :input").attr("disabled", true);

answered Mar 13 '11 at 16:14

Andrew Whitaker

124,656
32
289
307

can i use this to set all inputs inside div to value 0? – Atom Vayalinkal Jan 04 '12 at 07:59
3

I want to disable also... My has onclick too – RAJ Jul 30 '12 at 07:59
7

Citing [jQuery](http://api.jquery.com/input-selector/): _Because :input is a jQuery extension and not part of the CSS specification, queries using :input cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :input to select elements, first select the elements using a pure CSS selector, then use .filter(":input")._ – acme Sep 12 '12 at 08:16
2

@acme: Agree 100% but the question doesn't give any hints as to what selector I could possibly filter on. The only information I was given was that the user must be able to do it with a *parent `div` name* and that's it. If given more information I could have come up with a more efficient solution. – Andrew Whitaker Sep 12 '12 at 14:22
You're right - I just wanted to mention this for the sake of completeness. Though I guess the performance boost comes only into play with lots of form fields. – acme Sep 12 '12 at 14:29
if you want to disable all the elements, not only inputs but some custom buttons, use children(): $('#your-form').children().prop('disabled', true); – walv Jun 25 '14 at 07:27
1

Use .prop() instead of .attr() (above jquery 1.6) – Akshay Gundewar May 11 '16 at 13:36
@acme i tried $("#my_frm").filter(":input").prop('disabled', true); but it's not working (however code in this answer works)...any ideas why? – Andrew Jan 07 '17 at 16:57
input not able to handle select (dropdown), need to have one more selector for select: $("#parent-selector :input, #parent-selector select").attr("disabled", true); – John Li Feb 24 '17 at 15:42
@Andrew: which jQuery version do you use? – acme Mar 09 '17 at 15:03
@acme jquery-1.12.4.min.js and if I remember correctly, it was regarding selection dropdowns – Andrew Mar 09 '17 at 15:50

score 165 · Answer 2 · answered Mar 13 '11 at 16:13

165

$('#mydiv').find('input, textarea, button, select').attr('disabled','disabled');

answered Mar 13 '11 at 16:13

Trevor

11,269
2
33
40

4

it should be ('input, textarea, button') all selectors should be quoted with one set of quotes. http://api.jquery.com/multiple-selector/ Doing it your way you are sending multiple arguments. – Ivan Ivanic Mar 13 '11 at 16:16
2

This will only find you inputs, ignoring textareas and buttons. The :input selector is the way to go, but if you wanted to list them explicitly, you would need to use `$('#mydiv').find('input, textarea, button')`. – Mark Hildreth Mar 13 '11 at 16:19
1

...or just $('#your-form').children().prop('disabled', true); – walv Jun 25 '14 at 07:28
@walv your code **only** works if all the form elements are a single descendent of the form. Find() finds all of the elements in the list regardless of descendent level. This line of code is correct other than using the prop instead of attr for new jquery versions. – Chris O Aug 26 '16 at 16:04

score 33 · Answer 3 · answered Aug 28 '13 at 12:04

33

For jquery 1.6+, use .prop() instead of .attr(),

$("#parent-selector :input").prop("disabled", true);

or

$("#parent-selector :input").attr("disabled", "disabled");

answered Aug 28 '13 at 12:04

Optimus Prime

6,817
5
32
60

2

you are right but some time prop work and some time not work,specially in cause of checkbox and radiobutton – damon Jun 09 '15 at 05:44
i realize that this is an old thread, but this kicks up some errors when using typescript – Simon Price Oct 03 '18 at 13:11

score 9 · Answer 4 · answered Sep 11 '18 at 12:57

9

Simply this line of code will disable all input elements

$('#yourdiv *').prop('disabled', true);

answered Sep 11 '18 at 12:57

Samir Rahimy

2,580
1
18
10

best answer from my opinion. – Ajay2707 Feb 13 '20 at 10:39

score 5 · Answer 5 · answered Feb 20 '13 at 05:57

    $(document).ready(function () {
        $('#chkDisableEnableElements').change(function () {
            if ($('#chkDisableEnableElements').is(':checked')) {
                enableElements($('#divDifferentElements').children());
            }
            else {
                disableElements($('#divDifferentElements').children());
            }
        });
    });

    function disableElements(el) {
        for (var i = 0; i < el.length; i++) {
            el[i].disabled = true;

            disableElements(el[i].children);
        }
    }

    function enableElements(el) {
        for (var i = 0; i < el.length; i++) {
            el[i].disabled = false;

            enableElements(el[i].children);
        }
    }

score 5 · Answer 6 · answered Dec 08 '18 at 10:00

How about achieving this using only HTML attribute 'disabled'

<form>
 <fieldset disabled>
  <div class="row">
   <input type="text" placeholder="">
   <textarea></textarea>
   <select></select>
  </div>
  <div class="pull-right">
    <button class="button-primary btn-sm" type="submit">Submit</button>
  </div>
 </fieldset>
</form>

Just by putting disabled in the fieldset all the fields inside of that fieldset get disabled.

$('fieldset').attr('disabled', 'disabled');

you can just `disabled` the form – Sergio A. Kessler Jul 12 '21 at 18:39 — Sergio A. Kessler, Jul 12 '21 at 18:39

score 1 · Answer 7 · answered Sep 21 '15 at 16:04

1

I'm using the function below at various points. Works in a div or button elements in a table as long as the right selector is used. Just ":button" would not re-enable for me.

function ToggleMenuButtons(bActivate) {
    if (bActivate == true) {
        $("#SelectorId :input[type='button']").prop("disabled", true);
    } else {
        $("#SelectorId :input[type='button']").removeProp("disabled");
    }
}

answered Sep 21 '15 at 16:04

AWizardInDallas

111
11

two in one solution great. – 3 rules Feb 23 '16 at 10:29

irfandar · Answer 8 · 2017-11-19T09:08:52.467

1

For me the accepted answer did not work as I had some asp net hidden fields which got disabled as well so I chose only to disable visible fields

//just to save the list so we can enable fields later
var list = [];
$('#parent-selector').find(':input:visible:not([readonly][disabled]),button').each(function () {
    list.push('#' + this.id);
});

$(list.join(',')).attr('readonly', true);

edited Nov 19 '17 at 09:08

answered Nov 17 '17 at 15:12

irfandar

1,690
1
23
24

score 0 · Answer 9 · answered Jul 21 '17 at 11:04

Following will disable all the input but will not able it to btn class and also added class to overwrite disable css.

$('#EditForm :input').not('.btn').attr("disabled", true).addClass('disabledClass');

css class

.disabledClass{
  background-color: rgb(235, 235, 228) !important;
}

score 0 · Answer 10 · edited Dec 07 '17 at 14:08

0

Use the CSS Class to prevent from Editing the Div Elements

CSS:

.divoverlay
{
position:absolute;
width:100%;
height:100%;
background-color:transparent;
z-index:1;
top:0;
}

JS:

$('#divName').append('<div class=divoverlay></div>');

Or add the class name in HTML Tag. It will prevent from editing the Div Elements.

edited Dec 07 '17 at 14:08

Melebius

6,183
4
39
52

answered Dec 07 '17 at 13:51

Laddu Vasanth

1
1

score 0 · Answer 11 · answered Jul 16 '18 at 06:38

Only text type

$(".form-edit-account :input[type=text]").attr("disabled", "disabled");

Only Password type

$(".form-edit-account :input[type=password]").attr("disabled", "disabled");

Only Email Type

$(".form-edit-account :input[type=email]").attr("disabled", "disabled");

Urvish Joshi · Answer 12 · 2020-07-22T23:28:04.197

0

If your form inside div simply contains form inputting elements, then this simple query will disable every element inside form tag:

<div id="myForm">
    <form action="">
    ...
    </form>
</div>

However, it will also disable other than inputting elements in form, as it's effects will only be seen on input type elements, therefore suitable majorly for every type of forms!

$('#myForm *').attr('disabled','disabled');

edited Jul 22 '20 at 23:28

answered Jul 22 '20 at 23:11

Urvish Joshi

147
8

1

Please fix your second sentence. It seems to say that your code will disable non-input elements, but then it says it will only affect input elements. Please clarify your meaning. *(Neat trick, by the way - good answer)* – cssyphus Jul 22 '20 at 23:17

disable all form elements inside div

12 Answers12

Linked