jquery enabling and disabling dom elements without removing

Question

I have a form which at some point in its life has three choices. Depending on which item is checked more form elements will drop down. At the moment these are just hidden and will show/hide on click. However when validating these are still in the DOM. I didn't want to have to remove them and add them again each time, is there a simpler way of enabling/disabling a chunk of form options? Cheers

Answer 1

you can put the different form elements in a div with an id. then do

$('#IdOfDivHoldingSetOfElements').find('input').attr('disabled', 'disabled');

and

$('#IdOfDivHoldingSetOfElements').find('input').removeAttr('disabled');

if you have drop down selects you'll need to also disabled the selects of course.

Answer 2

I have used this in a form to disable inputs. However they are always going to be in the DOM and depending on how you are validating the form, this may not be the answer.

$('#elementwrapper input').each(function() {
    $(this).attr('disabled', 'disabled');
});
$('#elementwrapper select').each(function() {
    $(this).attr('disabled', 'disabled');
});