javascript - 页面重新加载后启用禁用的文本框

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

您可以将该文本框的状态存储在浏览器本地存储中，并从那里计算出来。

$(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
 }
}