Question

<!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";只是勾勒出框。

非常感谢任何帮助

Answer 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;

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

Answer 2

如果他们被禁用，那么你应该使用＆＃34;禁用＆＃34;内置于复选框的属性。这将禁用它们并为它们提供禁用的外观。

在Javascript中更改复选框颜色

2 个答案: