我的假设是,如果我禁用了一个div,所有的内容也都禁用了。

然而,内容是灰色的,但我仍然可以与它互动。

有办法做到吗?(禁用一个div,让所有的内容也禁用)


当前回答

在jQuery中,另一种方法是获得包含DIV的内部高度、内部宽度和位置,然后简单地覆盖另一个DIV,透明的,在相同大小的上面。这将适用于容器内的所有元素,而不仅仅是输入。

记住,尽管禁用了JS,你仍然可以使用DIVs的输入/内容。上面的答案也一样。

其他回答

function disableItems(divSelector){
    var disableInputs = $(divSelector).find(":input").not("[disabled]");
    disableInputs.attr("data-reenable", true);
    disableInputs.attr("disabled", true);
}

function reEnableItems(divSelector){
    var reenableInputs = $(divSelector).find("[data-reenable]");
    reenableInputs.removeAttr("disabled");
    reenableInputs.removeAttr("data-reenable");
}

编辑: 下面我使用了.on()方法,改用.bind()方法

$(this).bind('click', false);
$(this).bind('contextmenu', false);

要删除设置,可以使用.unbind()方法。然而.off()方法并没有像预期的那样工作。

 $(this).unbind('click', false);
 $(this).unbind('contextmenu', false);

在研究了数百种解决方案后!学习指针事件,下面是我所做的。

正如@Kokodoko在他的解决方案中提到的,这适用于除IE之外的所有浏览器。指针事件在IE11中有效,在低版本中无效。我还注意到在IE11中,指针事件在子元素上不起作用。因此,如果我们有下面这样的东西

 <a href="www.preshmalinetpereira.wordpress.com"><i class="car icon"></i><span>My Blog</span></a>

哪里span -是子元素,设置指针事件:无效

为了克服这个问题,我写了一个函数,它可以作为IE的指针事件,并且可以在较低的版本中工作。

在JS文件中

DisablePointerEvents(".DisablePointerEvents");


function DisablePointerEvents(classId) {
    $(classId).each(function () {
        $(this).on('click', false );
        $(this).on('contextmenu', false );
    });
}

在CSS文件中

.DisablePointerEvents{
    pointer-events: none;
    opacity: 0.7;
    cursor: default;
}

在HTML中

 <a href="www.preshmalinetpereira.wordpress.com" class="DisablePointerEvents"><i class="car icon"></i><span>My Blog</span></a>

这伪造了指针事件场景,即指针事件不工作,当上述条件的子元素发生时。

JS也一样

https://jsfiddle.net/rpxxrjxh/

这个css仅/noscript解决方案在fieldset(或div或任何其他元素)上添加了一个覆盖层,防止交互:

fieldset { position: relative; }
fieldset[disabled]::after { content: ''; display: inline-block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: all; background: rgba(128,128,128,0.2); }

如果你想要一个不可见的,即透明的覆盖,将背景设置为rgba(128,128,128,0),因为没有背景它将不起作用。 以上操作适用于IE9+。下面这个简单得多的css可以在IE11+上运行

[disabled] { pointer-events: none; }

简单集解

看看我的选择器

$myForm.find('#fieldsetUserInfo input:disabled').prop("disabled", false);

fieldsetUserInfo是div包含我想禁用或启用的所有输入

希望这对你有所帮助

使用JQuery这样的框架来做以下事情:

function toggleStatus() {
    if ($('#toggleElement').is(':checked')) {
        $('#idOfTheDIV :input').attr('disabled', true);
    } else {
        $('#idOfTheDIV :input').removeAttr('disabled');
    }   
}

禁用和启用输入元素在一个Div块使用jQuery应该帮助你!

从jQuery 1.6开始,禁用功能应该使用。prop而不是。attr。