Question

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

Answer 1

的演示

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 2

使用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"/>

demo here

Answer 3

在这里使用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');
})

重命名按钮并使文本可编辑。

编辑答案经过编辑，以便在Eli指出时显示'readonly'

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

3 个答案: