JQuery経由で無効な要素にアクションを追加する方法は？

Question

目的： 一部の要素を変更できないように、ページが読み込まれるといくつかの要素が無効になりました。しかし、要素をダブルクリックした場合、その要素は変更可能です。

下記のコードをご覧ください。

私のバージョンは '.input_username' は無効になっているので、これは動作しないjqueryの-1.5.min.js

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

//です。

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

Answer 1

確かに、これはトリッキーです。

これを処理する1つの方法は、.input_usernameをいくつかのスパン要素で囲むことです。その後、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

次の2つのオプションだ：readonlyからdisabledから
1.変更：readonlyはそうではない

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

disabledは、イベントを無効にします。

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