在單擊按鈕時禁用對文本框的只讀

Question

我對文本框使用了“只讀”屬性，這使得文本框不可編輯，我是否知道如何在單擊按鈕時禁用只讀屬性。 我們可以使用任何腳本來做到這一點嗎？

<input type="text" name="" value="" readonly="readonly"/><br/>
<input type="submit" name="" value="update" onclick="" />

Answer 1

你可以做兩件事：

• 使用removeAttribute刪除readonly （不區分大小寫）屬性
• 將readOnly （區分大小寫）屬性設置為false

HTML：

<input id="myInput"  type="text"  readonly="readonly" /><br />
<input id="myButton" type="submit" value="update" />

JS（選項 1）：[演示]

document.getElementById('myButton').onclick = function() {
    document.getElementById('myInput').removeAttribute('readonly');
};

JS（選項 2）：[演示]

document.getElementById('myButton').onclick = function() {
    document.getElementById('myInput').readOnly = false;
};

Answer 2

嗯，簡單點！ 您可以使用 jQuery 刪除此屬性（jQuery 很簡單，您也可以使用 JS 來完成此操作）。 這是代碼：

$('input[type=submit]').click(function () {
  $('input[type=text]').removeAttr('readonly');
})

https://api.jquery.com/removeAttr/

Answer 3

您需要將元素的readOnly屬性設置為false

您可以使用document.getElementById() ，它通過其 ID 引用元素

HTML ，這里我添加了 id 到元素

<input type="text" id="myTextBox" name="" value="" readonly="readonly"/><br/>
<input type="submit" id="myButton"  name="" value="update" />

JavaScript ，在這里你可以看到readOnly屬性為 false。

document.getElementById('myButton').onclick = function() {
   document.getElementById('myTextBox').readOnly =false;
};

演示

此外，我建議您使用'type="button"'而不是type="submit"