如何通过JQuery将动作添加到禁用的元素？

Question

目的： 为了确保某些元素无法修改，我在页面加载后禁用了一些元素。但是，如果我双击元素，元素可以修改。

请参阅下面的代码。

我的版本是jQuery的1.5.min.js

function disableAccounts($column){ 
    $column.find('.input_application').attr("disabled","true"); 
} 

//这不起作用，因为 '.input_username' 已被禁用。

function addEditUsername($column){ 
    $column.find('.input_username').dblclick(function(){ 
     $(this).removeAttr('disabled'); 
    }); 
} 

Answer 1

事实上，这是棘手的。

处理此问题的一种方法是将.input_username与某个span元素一起打包。然后，您可以检查其上的dblclick事件，检查.input_application是否被禁用，如果是，则启用它。

示例代码：

HTML：

<span id="wrapper"><input class="input_username" /></span> 
<input class="input_application" disabled="disabled" /> 

的Javascript（伪代码）：

$('#wrapper').dblclick(function() { 
    if ($('.input_application').is('disabled')) { 
     // your code here 
    } 
}) 

但我要说gdoron's answer about readonly更好。

Answer 2

你有两个选择：
1.更改从disabled到readonly：

function disableAccounts($column){ 
    $column.find('.input_application').attr("readonly", "readonly"); 
} 

disabled禁用事件，而readonly没有。

2.用一个跨度环绕输入，并将dbclick事件附加到<sapn>。

<span id='surrounding'> 
    <input type="text" disabled="disabled" class=".input_username" /> 
</span>​ 

function addEditUsername($column){ 
    $column.find('.#surrounding').dblclick(function(){ 
     $(this).find('.input_username').removeAttr('disabled'); 
    }); 
} 

$column.find('#surrounding').dblclick(function(){... 

阅读更多信息：Event on a disabled input