Question

Purpose:
To make sure some elements couldn’t be modified, I disabled some elements once the page was loaded. But if I double clicked the element, the element could be modifiable.

Please see the below code.

My version is jquery-1.5.min.js

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

// this doesn’t work since ‘.input_username’ has been disabled.

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

Answer 1

Indeed, this is tricky.

One way to handle this would be to wrap .input_username with some span element. Then, you can check the dblclick event on it, check if the .input_application is disabled, and enable it if it is.

Sample code:

HTML:

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

Javascript (pseudo code):

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

But I’d say gdoron’s answer about readonly is better.