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树。如果我错了，请纠正我，但是如果你点击禁用按钮，事件的来源是禁用按钮和点击事件是完全消失了。浏览器字面上不知道按钮得到了点击，也没有通过点击活动。就像你点击一样在网页上的黑洞上。

解决方法：

将日期字段设置为看起来好像他们被禁用了。
创建一个隐藏的“use_date”表单字段用一点值来确定是否在处理过程中使用日期字段。
添加新功能以点击日期字段更改要显示的样式类启用并设置“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

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

Answer 7

不要在输入字段的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网站是here

Answer 8

您可以在已禁用的输入上添加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 9

为了在客户端启用一个禁用的元素，让我们回答选中的复选框或其他东西，我最后不得不使用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 for more information

Answer 10

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

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

10 个答案: