Convertir le texte brut dans <input type = "text">

Question

J'ai plusieurs readonly textboxes comme celui-ci

<div id="box"> 
<form method="post" action=""> 
<input type="text" readonly="readonly" name="1" value="A" border="0" /> 
<input type="text" readonly="readonly" name="2" value="B" border="0" /> 
<input type="text" readonly="readonly" name="3" value="C" border="0" /> 
<input type="text" readonly="readonly" name="4" value="D" border="0" /> 
<input type="button" value="EDIT" /> 
</form> 
</div> 

Je veux convertir cette en lecture seule textboxes dans éditable Encadrés avec frontières sur cliquant sur Bouton Modifier.

Comment puis-je y parvenir en utilisant JQuery?

Answer 1

Solution ici, http://jsfiddle.net/NXCBQ/1/

JS:

$(document).ready(function() { 
    $("#edit-button").click(function() { 
     $(".someClass").each(function() { 
      $(this).removeAttr("readonly"); 
      $(this).addClass("borders"); 
     }); 
    }); 
}); 

CSS:

input.borders { 
    border:1px solid black; 
} 

Answer 2

non testé, mais:

$('input[type=button]').click(function(){ 
    $('input[type=text]').removeAttr('readonly').attr('border', '1'); 
}); 

EDIT: Je mettrais plutôt frontière avec:

.css('border', '1px solid #000') 

au lieu de

.attr('border', '1') 

Answer 3

$("input[type=button]").click(function() { 
    $("input[type=text]").removeAttr("readonly").removeAttr("border"); 
});