javascript - 将纯文本转换成<输入类型="text">

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>  

我想将这个readonly 文本框转换为Editable 点击时带有边框 的文本框编辑按钮。

如何使用 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;
}