0

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');
    });
}
53iScott
  • 827
  • 1
  • 13
  • 18

2 Answers2

2

You got two options:
1. Change from disabled to readonly: 

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

disabled disables events, while readonly does not.

2. Surround the input with a span, and attach dbclick event to the <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(){...

Read this for more info: Event on a disabled input

Community
  • 1
  • 1
gdoron
  • 147,333
  • 58
  • 291
  • 367
2

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.

Community
  • 1
  • 1
Florian Margaine
  • 58,730
  • 15
  • 91
  • 116