删除已禁用的表单字段的已禁用属性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以及其他浏览器可以禁用已禁用的表单字段上的DOM事件.从已禁用的表单字段开始的任何事件都将被完全取消,并且不会在DOM树中向上传播.如果我错了,请纠正我,但如果您单击禁用按钮,则事件源是禁用按钮,并且完全消除了单击事件.浏览器字面上不知道点击的按钮,也没有通过点击事件.就像你点击网页上的黑洞一样.

解决方法:

1. 将日期字段设置为看起来好像已被禁用.
2. 使用位值创建隐藏的"use_date"表单字段,以确定在处理期间是否使用日期字段.
3. 将新函数添加到onClick的日期字段,这将更改样式类以显示启用并将"use_date"值设置为1.

Answer 2

用readonly而不是disabled

至少对于复选框,这会使它们看起来已禁用但行为正常(在Google Chrome上测试).您必须捕获单击并根据需要阻止事件的默认操作.

Answer 3

在单击时启用禁用元素有点违背了禁用的目的，您不觉得吗？如果您确实想要所描述的行为，只需将其样式设置为“禁用”并在单击时删除这些样式即可。