JavaScript疑难：切换日期时无法重新启用Radio输入的问题排查

看起来你的核心问题是切换日期时，之前被禁用的radio按钮没有被正确重新启用，导致状态混乱。我们来一步步排查并修复：

可能的原因 #

1. 样式未同步恢复：你在禁用radio时设置了标签的灰色背景，但启用radio时没有把这个样式还原，导致视觉上看起来还是禁用状态（哪怕radio已经可以点击）。
2. 异步操作冲突：IndexedDB的操作是异步的，如果你快速切换日期，之前的DB请求可能还在处理，会覆盖新的启用操作。
3. 元素选择或循环的潜在问题：getElementsByName返回的NodeList可能存在兼容性或遍历遗漏的情况。

具体修复方案 #

1. 完善启用逻辑，同步恢复样式 #

修改启用radio的代码段，在启用的同时还原标签的背景样式，确保视觉和功能一致：

// 启用所有radio并恢复默认样式
let pazLaik = document.querySelectorAll('input[name="pas-laikas"]'); // 用querySelectorAll更可靠
for (let b = 0; b < pazLaik.length; b++) { 
  pazLaik[b].disabled = false; 
  // 找到对应的span标签，清空行内样式恢复默认
  let spanElement = document.getElementById(pazLaik[b].id + "-2");
  if (spanElement) {
    spanElement.style.background = "";
    // 如果你有默认的可用状态样式，也可以在这里设置，比如：
    // spanElement.style.background = "#ffffff";
  }
}

2. 避免异步操作冲突 #

添加一个全局标记，确保同一时间只有一个DB操作在进行，防止状态被覆盖：

// 全局变量：标记当前是否有DB处理任务
let isProcessingDateCheck = false;

function laisviLaikai() { 
  // 如果正在处理，直接返回避免冲突
  if (isProcessingDateCheck) {
    console.log("Duomenys dar apdorojami, palaukite...");
    return;
  }
  isProcessingDateCheck = true;

  let tikrinamaData = document.getElementById("datepicker").value; 
  console.log("Gaunama data is lauko " + tikrinamaData); 

  // --- 这里放上面完善后的启用逻辑 ---
  let pazLaik = document.querySelectorAll('input[name="pas-laikas"]');
  for (let b = 0; b < pazLaik.length; b++) { 
    pazLaik[b].disabled = false; 
    let spanElement = document.getElementById(pazLaik[b].id + "-2");
    if (spanElement) {
      spanElement.style.background = "";
    }
  }

  let db; 
  let request = window.indexedDB.open("InfoDB", 1); 

  request.onerror = function(e) { 
    console.log("Klaida: " + e.target.error); 
    isProcessingDateCheck = false; // 重置标记
  }; 

  request.onsuccess = function (e) { 
    db = e.target.result; 
    // 读取数据用readonly权限足够，提升性能
    let tran = db.transaction(["info"], "readonly"); 
    let objektas = tran.objectStore("info"); 
    let ats = objektas.getAll(); 

    ats.onsuccess = function(){ 
      let atsakymas = ats.result; 
      for (let a = 0; a < atsakymas.length; a++){ 
        if (tikrinamaData === atsakymas[a].data){ 
          let banLaikas = atsakymas[a].laikas; 
          let blLaikas = document.getElementById(banLaikas); 
          // 确保元素存在再操作，避免报错
          if (blLaikas) {
            blLaikas.disabled = true; 
            let inactive = document.getElementById(banLaikas+"-2"); 
            if (inactive) {
              inactive.style.background = "#969696"; 
            }
            console.log("Užblokuotas laikas: " + banLaikas)
          }
        } 
      } 
      isProcessingDateCheck = false; // 重置标记
    };

    ats.onerror = function() {
      console.log("Klaida skaitant duomenis iš duomenų bazės");
      isProcessingDateCheck = false; // 重置标记
    };

    tran.oncomplete = function(e) { 
      console.log("Duomenų apdorojimas baigtas"); 
      db.close(); // 操作完成后关闭连接，避免资源占用
    }; 
  }; 
}

3. 额外优化建议 #

• 日期格式一致性：确认datepicker返回的日期格式（比如YYYY-MM-DD）和IndexedDB中存储的data字段格式完全一致，否则条件判断tikrinamaData === atsakymas[a].data会失效。
• 复用DB连接：如果频繁调用这个函数，可以把DB连接缓存起来，不需要每次都重新打开，提升性能。
• 添加空值检查：对tikrinamaData做非空判断，避免用户未选择日期就点击按钮导致无效操作。

内容的提问来源于stack exchange，提问作者Romanas