javascript - 删除禁用表单字段的禁用属性 onClick

Question

我有一个表单域，开始时是禁用的，但有一个 onClick 来启用它。 onClick 不会触发(至少在 FF 中)，也不会触发简单的警报 (1);。

hacky 版本是在它的位置显示一个伪造的表单字段，“看起来”就像它被禁用(灰色样式)和 onClick，隐藏它并显示正确的字段已启用，但这很丑陋。

示例代码

这个有效:

<input type="text" id="date_end" value="blah" onClick="this.disabled=true;">

这个有效:

<label for="date_end_off" onClick="document.getElementById('date_end').disabled=false">Test</label>
<input type="text" id="date_end" value="blah" onClick="alert(1);" disabled>

这失败了:

<input type="text" id="date_end" value="blah" onClick="alert(1);" disabled>

这失败了:

<input type="text" id="date_end" value="blah" onClick="document.getElementById('date_end').disabled=false" disabled>

Answer 1

我在另一个论坛上看到了这个话题，所以我想我必须以不同的方式处理它。

http://www.webdeveloper.com/forum/showthread.php?t=186057

Firefox, and perhaps other browsers, disable DOM events on form fields that are disabled. Any event that starts at the disabled form field is completely canceled and does not propagate up the DOM tree. Correct me if I'm wrong, but if you click on the disabled button, the source of the event is the disabled button and the click event is completely wiped out. The browser literally doesn't know the button got clicked, nor does it pass the click event on. It's as if you are clicking on a black hole on the web page.

解决方法:

1. 将日期字段设置为看起来像他们是残疾人。
2. 制作一个隐藏的“use_date”表单域用一个位值来确定是否在处理过程中使用日期字段。
3. 向日期字段的 onClick 添加新功能更改样式类以显示启用并设置“use_date”值到 1。