JS 点击编辑按钮，显示input边框，可编辑，点击保存按钮，输入框消失，不可编辑

就类似编辑资料的，都是输入框，点击编辑可以编辑输入框内的内容，点击保存输入框消失

自己做个样式不显示控件input的边框就好了，默认readonly不允许编辑。点击编辑的时候加上边框样式，去掉readonly属性

 <style>.readonly input{border:none}</style>
<div id="dvInput" class="readonly">
 text1：<input type="text" readonly value="text1" /><br />
 text2：<input type="text" readonly value="text2" /><br />
</div>
<input type="button" value="编辑" onclick="btnClick(this)" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    function btnClick(btn) {
        var toEdit = btn.value == '编辑';
        $('#dvInput')[toEdit ? 'removeClass' : 'addClass']('readonly').find(':input').attr('readonly', toEdit ? false : true);
        btn.value = toEdit ? '保存' : '编辑';
        if (!toEdit) {//保存的ajax代码
            //..
        }
    }
</script>

之前弄过 因为 input 本身可能存在编辑状态和输入状态切换样式问题 不好调整 可以 完全用一个label 和一个input切换来实现这个效果 也不麻烦

通过　disabled 这个属性来控制。为true是不可编辑，为false是可编辑。

input这个最好用在lable，table，text上面，本来就没有视图显示

input有readonly和disable属性表示子读，不可编辑，可以通过控制这两个属性来控制，如果要传这个子读的值到后台用disable，不需要就随便。

input有readonly和disable属性表示子读，不可编辑，可以通过控制这两个属性来控制，如果要传这个子读的值到后台用disable，不需要就随便。