javascript - 使用复选框使 div 变灰

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>