Question

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

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