使用 JS 禁用 html 中 select 的问题

Question

我尝试在 select 中选择一个选项时禁用一个字段。我已经在 JS 中创建了一个带有函数的脚本来禁用它，但是它不起作用。有什么想法该怎么做？当我select“T in % compared to the previous day”时，我需要禁用“Time /%”字段，我没有实现。

所以我为 select 实现的代码是这样的

在这里，我创建了 selectable 菜单，其中包含他们将拥有的字段，然后通过脚本传递它来填充字段，我还创建了禁用“营业时间”框的功能。所以，这里出现了问题，当 const select = document.querySelector (# 'TipoPatron2') 开始时，脚本内部 table 消失了，但是当查询 select 或评论 table 仍然存在

<table border="0">

  <body>
    <td><strong>Patrón 2</strong>(
      <select name="TipoPatron2" id="TipoPatron2">
        <option value="00">T desde el encendido</option>
        <option value="01" selected="selected">T desde las 12:00</option>
        <option value="10">T en % respecto día anterior</option>
      </select>)</td>
    <td><input type="button" onclick="changeP2();" value="Actualizar"> <label id="Error2" style="color: red"></label>
    </td>
    </tr>
    <tr>
      <td>
        <table>
          <thead>
            <tr color="#ccff00">
              <td>Cambio</td>
              <td>Hora/%</td>
              <td>Minutos</td>
              <td>Dimado</td>
              <td>Dimado Entrada</td>
              <td>Color</td>
            </tr>
          </thead>
          <tbody id="mytbody2">
          </tbody>



          <script language="javascript">
            let tbody2 = document.querySelector("#mytbody2");
            var I = 1;
            for (I = 1; I <= 8; I++) {
              document.writeln("<tr align=center>");
              document.writeln("<td>" + I + " <input type=\"checkbox\" checked id=\"AP2C" + I + "\"></td>");
              document.writeln("<td><input type=\"text\" onpaste = \"alerta()\" value=\"0\" id=\"HP2C" + I + "\" maxlength=3 size=3></td>");
              document.writeln("<td><input type=\"text\" value=\"0\" id=\"MP2C" + I + "\" maxlength=2 size=2></td>");
              document.writeln("<td><select name=\"dimado\" id=\"DP2C" + I + "\"><option value =\"0\">0%</option><option value =\"1\">1%</option><option value =\"2\">2%</option><option value =\"3\">3%</option><option value =\"4\">4%</option><option value =\"5\">5%</option><option value =\"6\">6%</option><option value =\"7\">7%</option><option value =\"8\">8%</option><option value =\"9\">9%</option><option value=\"10\">10%</option><option value=\"11\">11%</option><option value=\"12\">12%</option><option value=\"13\">13%</option><option value=\"14\">14%</option><option value = \"15\">15%</option><option value=\"16\">16%</option><option value=\"17\">17%</option><option value=\"18\">18%</option><option value=\"19\">19%</option><option value = \"20\">20%</option><option value=\"21\">21%</option><option value=\"10\">10%</option><option value = \"22\">22%</option><option value = \"23\">23%</option><option value = \"24\">24%</option><option value = \"25\">25%</option><option value = \"26\">26%</option><option value = \"27\">27%</option><option value = \"28\">28%</option><option value = \"29\">29%</option><option value = \"30\">30%</option><option value = \"31\">100%</option></select></td>");
              document.writeln("<td><input type=\"text\" value=\"0\" id=\"IP2C" + I + "\" maxlength=2 size=2></td>");
              document.writeln("<td><input type=\"text\" value=\"0\" id=\"CP2C" + I + "\" maxlength=2 size=2></td>");
              document.writeln("</tr>");
            }
            //Creo una selector para que valide si se selecciona la opción de "T%" se ejecute la función desactivar
            /*const select = document.querySelector('#TipoPatron2')
                select.onchange = () => {
                    if (select.value == '10') {
                        desact()
                    }
                }
            */
            //Se crea la función alerta para cuando se haga un pegado en los box se ejecute la alerta
            function alerta() {
              alert("Seguro que quieres actualizar?");
            }
            //Se crea una función desactivar que se efectua en un for de 0 a 8 con el ID de las horas 
            function desact() {
              for (let i = 1; i <= 8; i++)
                document.getElementById('HP2C' + i).setAttribute("disabled", "disabled");
            }
          </script>
          <tr align="center">
            </tbody>
        </table>
  </body>
  </td>

当查询select或未评论时的照片

现在，我转到页面，table 消失了 enter image description here

如果我评论 const select = document.querySelector ('#TipoPatron2') table 出现 enter image description here

我需要这个查询 select 或者，因为当“T en % respecto día anterior”在第一个 select 中被编辑时，它负责禁用“Hora/%” 42=]。有什么想法吗？

Answer 1

看看这个

我简化了 select 的创建
我假设你的意思是当 TipoPatron2 的值为“10”时禁用 HP2Cs

const tbody2 = document.getElementById("mytbody2");
tbody2.innerHTML = Array.from({length: 8}, (_, index) => index + 1).map(i => `<tr align=center>
  <td>${i}<input type="checkbox" checked id="AP2C${i}" /></td>
  <td><input type="text" value="0" id="HP2C${i}" maxlength=3 size=3 /></td>
  <td><input type="text" value="0" id="MP2C${i}" maxlength=2 size=2 /></td>
  <td><select name="dimado" id="DP2C ${i}">${Array.from({length: 29}, (_, index) => index + 1).map(i => `<option value="${i}">${i}%</option>`).join("") }
    <option value = "31">100%</option></select></td>
  <input type="text" value="0" id="IP2C${i}" maxlength=2 size=2 /></td>
  <td><input type="text" value="0" id="CP2C${i}" maxlength=2 size=2 /></td>
  </tr>`).join("")

const HP2Cs = document.querySelectorAll("[id^=HP2C]")
document.getElementById("TipoPatron2").addEventListener("change", function() {
  const dis = this.value==="10"; 
  HP2Cs.forEach(hp2c => hp2c.disabled = dis)
})    
tbody2.addEventListener("paste", e => {
  const tgt = e.target;
  if (tgt.id.startsWith("HP2C")) alert("Seguro que quieres actualizar?");
})

<table border="0">
  <tbody>
    <tr>
      <td><strong>Patrón 2</strong>(
        <select name="TipoPatron2" id="TipoPatron2">
          <option value="00">T desde el encendido</option>
          <option value="01" selected="selected">T desde las 12:00</option>
          <option value="10">T en % respecto día anterior</option>
        </select>)</td>
      <td><input type="button" onclick="changeP2();" value="Actualizar"> <label id="Error2" style="color: red"></label></td>
    </tr>
    <tr>
      <td>
        <table>
          <thead>
            <tr color="#ccff00">
              <td>Cambio</td>
              <td>Hora/%</td>
              <td>Minutos</td>
              <td>Dimado</td>
              <td>Dimado Entrada</td>
              <td>Color</td>
            </tr>
          </thead>
          <tbody id="mytbody2">
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

使用 JS 禁用 html 中 select 的问题

Problem disable fields of a select in html with JS

html

javascript

select