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

Question

I have a simple js validation function that checks if a checkbox is checked, if it's then the textbox input is enabled for the user, but when the checkbox is not checked it automatically makes the textbox field disabled.

The problem is that when after saving the page in the AJAX with not checked field, causes that the textbox field is again enabled even the checkbox is not checked , when I check it again 2 times then the function works again, but each time the page reloads and save previously selected values the function does not works at is should.

What I am doing wrong? Is there a different way to prevent this behavior?

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

You can store the state of that textbox in browser localStorage and work it out from there.

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