如何通過單擊該按鈕將按鈕轉換爲保存按鈕

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

重命名按鈕，使文本編輯。

編輯答案編輯以顯示「只讀」作爲禮指出