Question

当选中复选框时，我需要灰显/禁用div。

任何人都可以帮我解决一个关于JSfiddle的例子吗？

这是我的代码：http://jsfiddle.net/albertoc/vFrAB/5/

HTML：

<div id="wrap" style="width:500px">
    <div id="content">
        <p>This box will be disabled! <a href="#">Link</a>
        </p>
    </div>
    <div id="darkLayer" class="darkClass" style="display:none"></div>
    <div id="checkbox">
        <form>
            <input type="checkbox" id="myCheckBox" />
        </form>
    </div>
</div>

CSS：

.darkClass
{
    background-color: white;
    filter:alpha(opacity=50); /* IE */
    opacity: 0.5; /* Safari, Opera */
    -moz-opacity:0.50; /* FireFox */
    z-index: 20;
    height: 100%;
    width: 100%;
    background-repeat:no-repeat;
    background-position:center;
    position:absolute;
    top: 0px;
    left: 0px;
}

JS：

function dimOff()
{
    document.getElementById("darkLayer").style.display = "none";
}
function dimOn()
{
    document.getElementById("darkLayer").style.display = "";
}

Answer 1

我将您的两个功能合二为一，并为您的复选框提供了比您的叠加层更高的z-index，以便它可以保持可点击状态。

function dim(cb) {
    document.getElementById("darkLayer").style.display = (cb.checked) ? '' : 'none';
}

<强> jsFiddle example

CSS

#checkbox {
    position:relative;
    z-index:21;
}

HTML

<div id="wrap" style="width:500px">
    <div id="content">
        <p>This box will be disabled! <a href="#">Link</a></p>
    </div>
    <div id="darkLayer" class="darkClass" style="display:none"></div>
    <div id="checkbox">
        <form>
            <input type="checkbox" id="myCheckBox" onchange="dim(this)" />
        </form>
    </div>
</div>

Answer 2

将.darkLayer移至 #content

<div id="wrap" style="width:500px">
    <div id="content">  
        <div id="darkLayer" class="darkClass" style="display:none"></div>
        <p>This box will be disabled! <a href="#">Link</a></p>
    </div>
    <div id="checkbox">  
        <form>
            <input type="checkbox" id="myCheckBox" />
        </form>
    </div>
</div>

提供 #content 样式，使其成为 offsetParent / scrollParent 。

#content {
    position:relative;
}

将监听器附加到复选框

var i = 0;
document.getElementById("myCheckBox").addEventListener('click', function () {
   [dimOff, dimOn][i=1-i](); 
});

现在.darkLayer仅涵盖 #content ，而不是第二个<div>持有复选框。

DEMO

使用复选框灰显div

2 个答案: