Disable entire DIV using Javascript/JQuery

Question

I have following DIV which shows some controls:

<div id="buttonrow" class="buttonrow">
        <div class="Add" title="Add">
            <div class="AddButton">
                <input id="images" name="images" title="Add Photos" multiple="multiple" type="file">
            </div>
            <div class="AddText">
                Add
            </div>
        </div>
        <div class="Upload" title="Upload">
            <div class="UploadButton">
                <button id="start" type="submit" title="Upload Photos">
                </button>
            </div>
            <div class="UploadText">
                Upload
            </div>
        </div>
        <div class="Clear" title="Clear">
            <div class="ClearButton">
                <button id="reset" type="reset" title="Clear Photos">
                </button>
            </div>
            <div class="ClearText">
                Clear
            </div>
        </div>
        <div class="Delete" title="Delete">
            <div class="DeleteButton">
                <button id="delete" type="button" title="Delete Photos">
                </button>
            </div>
            <div class="DeleteText">
                Delete
            </div>
        </div>
        <div id="SelectAll">
            <input title="Select All Images" id="selectAllCB" type="checkbox">
        </div>
        <div id="dragandrophandler">
            Drag &amp; Drop Your Photos Here
        </div>
        <div id="ImagesCount">
        </div>
        <div id="Loading" class="Loading">
            <img alt="loading" src="../customcontrol/progress.gif">
            <div>
                Loading...</div>
        </div>
    </div>

I need to know how can I disable this entire DIV using Javascript/JQuery function?

EDIT: To disable DIV means user should not be able to interact with DIV controls. They must be in read-only state (non-clickable). I dont want to hide DIV!

Answer 1

in Javascript, you can use:

<script lnaguage="javascript">
   document.getElementById('buttonrow').style.display='none';
</script>

Answer 2

use:

 $("#buttonrow *").attr("disabled", "disabled").off('click');

Answer 3

Try this with .prop():

$("#buttonrow :input").prop("disabled", true);

:input will select all input elems including text, textarea, button, select etc.

Answer 4

$("button, input",$("#buttonrow")).attr("disabled", "disabled");

Answer 5

Can you please try this:

$("#buttonrow").each(function()
{
  $(this).prop('disbaled',true);
});

Hope this helps..

Answer 6

$('#buttonrow').on('click', function(){
   $(this).css({ 'opacity': 0.7 });
   return false;
})