1

选中复选框时，我需要灰显/禁用 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 = "";
}
4

2 回答 2

3

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

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

jsFiddle 示例

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>
于 2013-08-27T13:53:57.643 回答
1

移动.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>持有复选框。

演示

于 2013-08-27T13:58:48.603 回答