Преобразование простого текста в <входного типа = "текст">

Question

У меня есть несколько чтения текстовых полей, как этот

<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> 

Я хочу, чтобы преобразовать эти только для чтения текстовых полей в Editable Textboxes с границами на щелчок Кнопка редактирования.

Как добиться этого с помощью JQuery?

Answer 1

решение здесь, 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

непроверенной, но:

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

EDIT: Я бы скорее положить границу с:

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

вместо

.attr('border', '1') 

Answer 3

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