使用 JS 禁用 html 中 select 的字段

Question

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

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

  <tr>
  <td color="#66ccff"><strong>Patrón 1 (<select name="TipoPatron1" id="TipoPatron1">
        <option value="00" selected="selected">T desde el encendido</option>
        <option value="01">T desde las 12:00</option>
        <option value="10" onclick="desactivar()">T en % respecto día anterior</option>
      </select>
      )</strong></td>
</tr>
<tr>
  <td>
    <table border="0">
      <tbody>
        <tr color="#ccff00" align="center">
          <td>Cambio</td>
          <td>Hora/%</td>
          <td>Minutos</td>
          <td>Dimado</td>
          <td>Dimado Entrada</td>
          <td>Color</td>
        </tr>
      </tbody>
    </table>
  </td>
</tr>

在这里，我创建了 selectable 菜单，其中包含他们将拥有的字段，然后通过脚本传递它来填充字段，我还创建了禁用“营业时间”框的功能

<script language="javascript">
                
            var I = 1;
            for (I = 1; I <= 8; I++) {
                document.writeln("<tr align=center>");
                document.writeln("<td>"+I+" <input type=\"checkbox\" checked id=\"AP1C"+I+"\"></td>");
                document.writeln("<td><input type=\"text\" onpaste = \"alerta()\" value=\"0\" id=\"HP1C"+I+"\" maxlength=3 size=3></td>");
                document.writeln("<td><input type=\"text\" value=\"0\" id=\"MP1C"+I+"\" maxlength=2 size=2></td>");
                document.writeln("<td><select name=\"dimado\" id=\"DP1C"+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=\"IP1C"+I+"\" maxlength=2 size=2></td>");
                document.writeln("<td><input type=\"text\" value=\"0\" id=\"CP1C"+I+"\" maxlength=2 size=2></td>");
                document.writeln("</tr>");
                }
                function alerta() {
                        alert("Seguro que quieres actualizar?");
                }
                function desactivar() {
                         document.getElementById('HP1C').setAttribute("disabled", "disabled");
    
                }
        
</script>

在 desactivar() 函数中，我尝试传递代表小时 ID 的 HP1C 元素的 ID，我传递了 getElementByID 和禁用属性，但它不起作用。

在照片中，当您看到带有“T en % respecto al dia anterior”的“Patron1”select时，必须停用“Hora/%”字段

Answer 1

disabled 是 boolean attribute.

function desactivar() {
    for (let i = 0; i < 8; i++)
        document.getElementById('HP1C1'+i).setAttribute("disabled", true);
}

编辑：您没有使用正确的事件

<body>
    <h1>Patrón 1</h1>
    <select name="TipoPatron1" id="TipoPatron1">
        <option value="00" selected="selected">T desde el encendido</option>
        <option value="01">T desde las 12:00</option>
        <option value="10">T en % respecto día anterior</option>
    </select>
    <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="mytbody">
            
        </tbody>
    </table>

    <script language="javascript">

        let i = 1;
        let tbody = document.querySelector("#mytbody");
        
        for (let i = 1; i <= 8; i++) {
            tbody.innerHTML += "<tr>";
            tbody.innerHTML += "<td>"+i+" <input type=\"checkbox\" checked id=\"AP1C"+i+"\"></td>";
            tbody.innerHTML += "<td><input type=\"text\" onpaste = \"alerta()\" value=\"0\" id=\"HP1C"+i+"\" maxlength=3 size=3></td>";
            tbody.innerHTML += "<td><input type=\"text\" value=\"0\" id=\"MP1C"+i+"\" maxlength=2 size=2></td>";
            tbody.innerHTML += "<td><select name=\"dimado\" id=\"DP1C"+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>";
            tbody.innerHTML += "<td><input type=\"text\" value=\"0\" id=\"iP1C"+i+"\" maxlength=2 size=2></td>";
            tbody.innerHTML += "<td><input type=\"text\" value=\"0\" id=\"CP1C"+i+"\" maxlength=2 size=2></td>";
            tbody.innerHTML += "</tr>";
        }

        const select = document.querySelector('#TipoPatron1')
        select.onchange = () => {
            if (select.value == '10') {
                desactivar()
            }
        }

        function alerta() {
            alert("Seguro que quieres actualizar?");
        }

        function desactivar() {
            for (let i = 1; i<= 8; i++)
                document.getElementById('HP1C' + i).setAttribute("disabled", "disabled");
        }


    </script>
</body>

使用 JS 禁用 html 中 select 的字段

Disable fields of a select in html with JS

html

javascript

forms

select