我想在用戶單擊“禁用”按鈕后禁用輸入欄位，并自動將“禁用”按鈕更改為“啟用”，同時禁用輸入欄位。但是，如果我們重繪 或按Ctrl F5，禁用的欄位將變為啟用和可編輯的。下面是我的代碼，即使在重繪 和更改按鈕時我應該怎么做才能使其保持禁用狀態？謝謝你。
網頁格式
<input id="firstname"></input>
<input id="lastname"></input>
<input id="email"></input>
<button type="button" class="dropdown-item" id="status">Disable</button>
腳本
const disableInputs = function() {
sessionStorage.disableInputs = 'true';
document.getElementById('firstname').disabled = true;
document.getElementById('lastname').disabled = true;
document.getElementById('email').disabled = true;
var elem = document.getElementById("status");
if (elem.value=="Disable") elem.value = "Enable";
else elem.value = "Disable";
};
if (sessionStorage.disableInputs === 'true') disableInputs();
document.getElementById('status').onclick = disableInputs;
該按鈕在添加 onlick change() 后顯示從禁用到啟用，但它在重繪 時不保存狀態，這是正確的嗎？
<button type="button" onclick="change();" id="status">Disable</button>
function change()
{
var elem = document.getElementById("status");
if (elem.value=="Disable") elem.value = "Enable";
else elem.value = "Disable";
}
uj5u.com熱心網友回復：
首先，您首先需要通過使用和保存資料disabled從sessionStorage獲取狀態getItemsetItem
disabled = !disabled;用于切換變數狀態，因此如果它是 true 將其更改為 false，反之亦然。
const status = document.getElementById('status');
const firstname = document.getElementById('firstname');
const lastname = document.getElementById('lastname');
const email = document.getElementById('email');
let disabled = JSON.parse(sessionStorage.getItem("disableInputs") ?? 'false');
firstname.disabled = lastname.disabled = email.disabled = disabled;
status.innerText = disabled ? 'Disable' : 'Enable';
function toggle() {
disabled = !disabled;
firstname.disabled = lastname.disabled = email.disabled = disabled;
status.innerText = disabled ? 'Disable' : 'Enable';
sessionStorage.setItem('disableInputs', disabled);
};<input id="firstname" />
<input id="lastname" />
<input id="email" />
<button type="button" onclick="toggle();" id="status">Disable</button>注意：<input>是一個空標簽，因為它沒有設計任何內容或結束標簽。為了合規，您可以像這樣使用它來表示標記的結尾：<input id="firstname" />
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/537483.html