Question

下午好，我正在尝试找到一个可以禁用其中所有元素的容器，不仅仅是输入，还有图像和其他没有禁用属性的元素...... 我不想隐藏容器，但禁用它...你知道有一个容器，我可以做到吗？谢谢

$(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

您可以使用CSS3的opacity属性并将其设置为正常值的一半。这将使容器本身和所有子元素看起来像是禁用的。然后，您还可以使用pointer-events: none来避免所有点击事件。

以下是fiddle，禁用整个菜单。您可以将这些CSS3规则添加到某个类中，然后使用addClass("className")函数将其添加到菜单中并单击某个按钮

禁用容器及其中的所有元素

1 个答案: