我的输入元素设置为禁用时如何接收 onclick 事件？答案

【问题标题】：How can my input element receive onclick events when it is set to disabled?我的输入元素设置为禁用时如何接收 onclick 事件？
【发布时间】：2010-05-12 13:51:32
【问题描述】：

我需要在禁用的输入标签上设置 onclick/hover 事件。
除了将其包装在另一个标签中并将事件赋予该标签之外，还有其他方法吗？

<input type="checkbox" onclick="cant_choose('event')" disabled="disabled" value="2" name="enroll_to[event][]">

【问题讨论】：

标签： javascript html events input

【解决方案1】：

您可以模拟它被 JavaScript 和 CSS 禁用。

也就是说，模糊它接收到的所有焦点，并添加一个类似这样的类。

input.disabled {
    background: #d4d0c8;
    color: #888;
    cursor: default;
}

更新

与JSbin 上的正常和禁用浏览器的输入框进行比较。

【讨论】：

这个解决方案的唯一问题是浏览器会在提交表单时发送这些虚假禁用的表单元素。对于真正禁用的表单元素，情况并非如此。
@Peter 在提交表单时，您真的可以在它们上设置disabled。
您可能还想添加一个占位符和只读属性。

【解决方案2】：

您可以将输入字段包装在一个容器中并在其上绑定点击事件。

<div id='input-container'>
    <input id='myText' disabled />
</div>

<script>
    $('#input-container').click(function() {
        alert('test');
    });
</script>

http://jsfiddle.net/M2EYH/

如果您有多个禁用字段，并且不想为每个容器创建唯一 ID，则可以为容器指定类名而不是 ID。

【讨论】：

嗯，它可以在 Chrome 和 IE 中运行，但在 Firefox 和 Opera 中不起作用。你知道如何让它在所有浏览器中工作吗？