disable a container, and all the elements inside it

Question

Good afternoon, I'm trying to find a container that can disable all the elements inside it, not just input's, but also image and other elements that do not have the disabled property ... I would not like to hide the container, but disable it ... do you know that there is a container that I can do it? thank you

$(document).ready(function () {
    $('#btnHabilitar').click(function () {
        $("#menu").prop("disabled", false); 
    });
    $('#btnDesabilitar').click(function () {
        $("#menu").prop("disabled", true);
    });

    $(document).mouseup(function (e) {
        var container = $("#menu");

        if (!container.is(e.target) && container.has(e.target).length === 0) {
            $("#menu").prop("disabled", true);
        }
    });

    $('#img1').click(function () {
        alert('clicou imagem');
    });
});

<fieldset id="menu" >
        <div class="container-fluid" >
            <div class="row">
                <input type="button" class="col-md-2 btn btn-primary" id="botao1" value="botao 1" />
                <input type="button" class="col-md-2 btn btn-primary" id="botao2" value="botao 2" />
                <input type="button" class="col-md-2 btn btn-primary" id="botao3" value="botao 3" />
                <input type="button" class="col-md-2 btn btn-primary" id="botao4" value="botao 4" />
                <input type="button" class="col-md-2 btn btn-primary" id="botao5" value="botao 5" />
                <input type="button" class="col-md-2 btn btn-primary" id="botao6" value="botao 6" />
            </div>
            <div class="row">
                <img src="img/css3.png" id="img1" style="width:200px; height:200px;"/>
                <img src="img/bootstrap.png" style="width:200px; height:200px;" />
                <img src="img/html.png" style="width:200px; height:200px;" />
            </div>
        </div>
    </fieldset>

Answer 1

You can use opacity property of CSS3 and set it to be half of normal. This will make the container itself and all child elements look like they are disable. You can then also use pointer-events: none to avoid all click events.

Here is fiddle for you that disables the whole menu. You can add those CSS3 rules to some class and then use addClass("className") function to add it to the menu with some button clicked