如何通过单击该按钮将按钮转换为保存按钮

Question

我有一个文本框在readonly中的值和一个按钮，如果我单击该按钮文本框必须更改为可编辑和按钮保存...使用JavaScript或jquery

Answer 1

使用removeAttr函数执行此操作。

对于readonly将属性readonly="readonly"添加到文本并将其从脚本中删除。

<script> 
function func1(button) 
{ 
    $(button).val('Save'); 
    $('input[type=text]').removeAttr('disabled') 
} 
</script> 
<input type="text" disabled="disabled"></input> 
<input type="button" onclick="func1(this)" value="enable"/> 

演示here

Answer 2

这里的上的jsfiddle http://jsfiddle.net/KTYWT/演示

HTML

<input id="textbox" type="text" readonly="readonly" /> 
<input type="button" id="textbutton" value="Edit" /> 

jQuery的

$('#textbutton').click(function(e) { 
    var text = $('#textbox'); 

    if (text.is('[readonly]')) { 
     text.removeAttr('readonly'); 
     $(this).val('Save'); 
    } else { 
     text.attr('readonly', 'readonly'); 
     $(this).val('Edit'); 
    } 
}); 

Answer 3

为例e。使用jQuery的位置：http://jsfiddle.net/jomanlk/azGPf/

<input id='thebox' type='text' readonly="readonly" value='locked'> 
<button id='thebutton'>The Button</button> 

$('#thebutton').click(function(){ 
    $('#thebox').removeAttr('readonly'); 
    $(this).html('save'); 
}) 

重命名按钮，使文本编辑。

编辑答案编辑以显示“只读”作为礼指出