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>

我想将此只读文本框转换为可编辑文本框，点击边框编辑按钮。

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

编辑：我宁愿把边界放在：

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

而不是

.attr('border', '1')

Answer 3

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

将纯文本转换为<input type =“text”/>

3 个答案: