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

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

1 个答案: