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?
12 Answers
Try using the :input
selector, along with a parent selector:
$("#parent-selector :input").attr("disabled", true);
-
can i use this to set all inputs inside div to value 0? Commented Jan 4, 2012 at 7:59
-
3
-
7Citing jQuery: 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").– acmeCommented Sep 12, 2012 at 8: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. Commented Sep 12, 2012 at 14:22 -
2
$('#mydiv').find('input, textarea, button, select').attr('disabled','disabled');
-
4it should be ('input, textarea, button') all selectors should be quoted with one set of quotes. api.jquery.com/multiple-selector Doing it your way you are sending multiple arguments. Commented Mar 13, 2011 at 16:16
-
2This 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')
. Commented Mar 13, 2011 at 16:19 -
1
-
@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 OCommented Aug 26, 2016 at 16:04
For jquery 1.6+, use .prop()
instead of .attr()
,
$("#parent-selector :input").prop("disabled", true);
or
$("#parent-selector :input").attr("disabled", "disabled");
-
2you are right but some time prop work and some time not work,specially in cause of checkbox and radiobutton– damonCommented Jun 9, 2015 at 5:44
-
i realize that this is an old thread, but this kicks up some errors when using typescript Commented Oct 3, 2018 at 13:11
Simply this line of code will disable all input elements
$('#yourdiv *').prop('disabled', true);
$(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);
}
}
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');
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");
}
}
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);
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;
}
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.
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");
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');
-
1Please 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)– cssyphusCommented Jul 22, 2020 at 23:17
readOnly
, not disabled.