Is there a way to gray out or disable a specific div when a checkbox is checked? I could use some guidance with an example on JSfiddle perhaps?
Here is the code snippet: http://jsfiddle.net/albertoc/vFrAB/5/
HTML:
<div id="wrap" style="width:500px">
<div id="content">
<p>This particular 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 = "";
}