如何通過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