Convert plain text into <input type="text">

Question

Hello,

I have multiple readonly textboxes like this

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

I want to convert this readonly textboxes into Editable Textboxes with borders on clicking Edit button.

How can I achieve this using JQuery ?

Answer 1

untested but:

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

EDIT: I would rather put border with:

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

instead of

.attr('border', '1')

Answer 2

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

Answer 3

Solution here, 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;
}