使用JS禁用html中選擇的欄位-有解無憂

當在選擇中選擇一個選項時，我嘗試禁用一個欄位。我在 JS 中創建了一個帶有函式的腳本來禁用它，但更多的是它不起作用。任何想法該怎么做？當我選擇“與前一天相比的時間百分比”時，我需要禁用“時間/％”欄位，但我沒有實作。

所以我為選擇實作的代碼是這樣的：

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

在這里，我使用它們將擁有的欄位創建可選選單，然后通過腳本傳遞它以填充欄位，我還創建了禁用“小時”框的函式

<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 和 disable 屬性，但它不起作用。

使用 JS 禁用 html 中選擇的欄位

在照片中，當您看到“Patron1”選擇“T en %respecto al dia front”時，必須停用“Hora/%”欄位

uj5u.com熱心網友回復：

disabled是一個布爾屬性。

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>

uj5u.com熱心網友回復：

您也許應該嘗試啟用/禁用“td”元素而不是“option”。看看這個：在表中啟用和禁用 td

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/339317.html

標籤：javascript html 形式选择

上一篇：Git 遠程倉庫基本操作及回滾日志常用命令

下一篇：如何動態更改多個文本框的文本？