頁面重新加載后啟用了禁用的文本框

Question

我有一個簡單的js驗證功能，用於檢查是否選中了復選框，如果選中，則為用戶啟用了文本框輸入，但是當未選中復選框時，它會自動禁用文本框字段。

問題是，在將頁面保存在AJAX中且未選中字段之后，導致即使未選中復選框也再次啟用了文本框字段，當我再次選中2次時，該功能再次起作用，但是每次頁面應該重新加載並保存該功能不起作用的先前選擇的值。

我做錯了什么？ 是否有其他方法可以防止這種行為？

function enableTextBodField() {

 var checkboxField= document.querySelector('.checkbox');
 var textBoxField= document.querySelector('.textBoxField');

 if (checkboxField.checked == false)
 {
    textBoxField.disabled = true;
 }
 else if (checkboxField.checked == true)
 {
    textBoxField.disabled = false;
 }
}

Answer 1

您可以將該文本框的狀態存儲在瀏覽器localStorage中，然后從那里進行計算。

$(document).ready(function() {
    var textboxState = localStorage.getItem("txtboxState"); // Get state from localstorage
    var textBoxField= document.querySelector('.textBoxField');
    var checkboxField= document.querySelector('.checkbox');

    if(textboxState != "" || textboxState != NULL){
      if(textboxState = "hidden"){
       textBoxField.disabled = true;
       checkboxField.checked = false;
      }else{
        if(textboxState == "visible"){
          textBoxField.disabled = false;
          checkboxField.checked = true;
        }
      }
    }else{
       textBoxField.disabled = false;
       checkboxField.checked = false;
    }

});

function enableTextBodField() {
 var checkboxField= document.querySelector('.checkbox');
 var textBoxField= document.querySelector('.textBoxField');

 if (checkboxField.checked == false)
 {
    textBoxField.disabled = true;
    localStorage.setItem("txtboxState","hidden"); // Set state in localstorage variable
 }
 else if (checkboxField.checked == true)
 {
    textBoxField.disabled = false;
    localStorage.setItem("txtboxState","visible"); // Set state in localstorage variable
 }
}