删除已禁用的表单字段的已禁用属性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

使用jQuery，我将事件处理程序附加到输入控件的父级。

<script type="text/javascript">
    $(function() {
        // disable all the input boxes
        $(".input").attr("disabled", true);

        // add handler to re-enable input boxes on click
        $("td:has(.input)").click(function() {
            $(".input", this).removeAttr("disabled");
        });
    });
</script>

我的所有输入控件都有“输入”类，它们存在于自己的表格单元格中。 如果你至少将输入标签包装在一个div中，那么这应该没有表格。

Answer 4

引用Quirksmode.org ：

“禁用表单字段上的单击事件不会触发Firefox和Safari中的事件.Opera会触发mousedown和mouseup事件，但不会触发click事件.IE会在窗体上触发mousedown和mouseup，但不会点击。所有这些实现都是认为是正确的。“

Quirksmode的兼容性表非常适合查找有关此类问题的更多信息。

Answer 5

我最近有一个非常类似的问题，通过将输入放在div中并将onClick移动到div来解决它。

<div onClick="myEnableFunction('date_end');">
<input type="text" id="date_end" value="blah" disabled>
</div>

Answer 6

您可以在禁用的输入上添加div：检查出来

 <div onclick="javascript:document.forma.demo1.disabled=false;" style="border:0px solid black; padding:00px;">
    <input type=text name="demo1" disabled style="width:30;">
  </div>

Answer 7

为了在客户端启用一个禁用的元素，让我们回答选中的复选框或其他东西，我最后不得不使用JS和jQuery的组合，见下文：

//enable the yes & no RB 
function enable()
{
        var RBNo = "rbnBusinessType";
        var RBYes = "rbnBusinessType";

        //jQuery approach to remove disabled from containing spans            
        $("#" + RBYes).parent().removeAttr('disabled');
        $("#" + RBNo).parent().removeAttr('disabled');

        //enable yes and no RBs
        document.getElementById(RBYes).disabled = false;
        document.getElementById(RBNo).disabled = false;               

}

在回发之后，您需要访问如下所示的请求，以获取客户端启用元素的值：

this._Organization.BusinessTypeHUbZoneSmall = Request.Params [“rbnBusinessTypeHUbZoneSmall”] == rbnBusinessTypeHUbZoneSmallYes.ID;

灵感取自： https ： //stackoverflow.com/questions/6995738/asp-javascript-radiobutton-enable-disable-not-included-in-postback-ajax获取更多信息

Answer 8

在点击类上启用禁用元素会失败禁用的目的，你不觉得吗？ 如果你真的想要你正在描述的行为，只需将其设置为“禁用”并在点击时删除这些样式。

Answer 9

不要在输入字段的onClick值上实现onClick事件的逻辑。 这可能就是为什么它不适用于Firefox。 而是将函数定义为onClick的值。 例如：

<input type="text" id="date_end" value="blah" onClick="doSomething()" disabled>

<script type="text/javascript">
  function doSomething()
  {
    alert("button pressed");
  }
</script>

它也值得研究JQuery。 您可以使用它来添加或删除元素和各种其他内容的属性。 例如，您可以通过编写如下函数从输入字段中删除禁用：

<script type="text/javascript">
      function doSomething()
      {
        alert("button pressed");
         $("#date_end").removeAttr('disabled'); //removes the disabled attribut from the  
                                                //element whose id is 'date_end'
      }
</script>

或者你可以添加如下：

$("#date_end").attr('disabled','true');

Jquery网站就在这里

Answer 10

如果您只是想阻止用户在您的字段中键入数据，而是希望字段populate事件，我的黑客解决方案是根本不禁用输入字段，而是在运行我的onclick或onfocus功能后，调用blur()以便用户无法编辑该字段。