inside the div, deactivate all form elements

Problem

Is there a way to disable all fields in a form (textarea/textfield/option/input/checkbox/submit, etc.) in jquery/javascript by specifying simply the parent div name?

Asked by amirash

Solution #1

Use the:input selector in conjunction with a parent selector:

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

Answered by Andrew Whitaker

Solution #2

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

Answered by Trevor

Solution #3

Use.prop() instead of.attr with jquery 1.6+. (),

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

or

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

Answered by Optimus Prime

Solution #4

    $(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);
        }
    }

Answered by Syed Nasir Abbas

Solution #5

This line of code will simply turn off all input components.

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

Answered by Samir Rahimy

Post is based on https://stackoverflow.com/questions/5290525/disable-all-form-elements-inside-div