0 
<!DOCTYPE html>
<html>
<body>

<form action="form_action.asp" method="get">
  <span style='background-color: red;'>
    <input style="FILTER: progid:DXImageTransform.Microsoft.Alpha( style=0,opacity=50);" type="checkbox" name="vehicle" value="Bike" /></span>I have a bike<br />

  <span style='background-color: red;'>
    <input style="-moz-opacity:0.5" type="checkbox" name="vehicle" value="Car" /></span> I have a car <br />
  <input type="submit" value="Submit" />
</form>

<p>Click on the submit button, and the input will be sent to a page on the server called "form_action.asp".</p>

</body>
</html>

我在网上找到了一些示例并将其拼凑在一起，顶部输入复选框应该适用于 ie，底部适用于 FF 和 chrome。两者都不好用。IE 看起来很草率，FF 和 chrome 似乎根本不起作用。我试图找出一个复选框列表，其中一些是根据以前的选择被禁用的。我让它适用于大多数浏览器，但有些浏览器不会将框变灰。

所以，我需要弄清楚如何使用 javascript 使这些框变灰。这似乎不起作用，document.getelementbyid(elementID).style.background = "#dbdbdb";只是勾勒出框。

任何帮助是极大的赞赏

4

2 回答 2

1

您的清单不需要可点击？

在某些浏览器中禁用它作为简单的解决方案，然后增加其他浏览器的不透明度：

document.getElementById(elementID).disabled="disabled";
document.getElementById(elementID).style.opacity="0.5";

那是假设您的背景是黑色的……可能不是。

否则获取复选框的 x,y 位置：

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left;

然后在复选框前面创建一个具有更高 z-index 和绝对定位的不透明度黑色 div。

于 2012-06-06T17:08:07.327 回答
0

如果它们被禁用，那么您应该使用复选框中内置的“禁用”属性。这将禁用它们并赋予它们禁用的外观。

于 2012-06-06T17:05:01.787 回答