复选框禁用/启用使用 JavaScript 函数的查询

checkbox disable/enable inquiry using javascript function

本文关键字：函数 JavaScript 查询 启用 复选框      更新时间：2023-09-26

我对 JavaScript 相当陌生，我整天都在谷歌上搜索这个，但我只找到了如何使用一个复选框启用和禁用一个文本框。我稍微调整了代码以使用我想要的内容，这就是我得到的。 我正在考虑指示 JS 函数仅遵循复选框的 id，但我似乎不知道该怎么做。

这是我的代码：

JavaScript 

 <script>
 function enableText(checked){
     if(!checked){
         document.getElementById('sel1').disabled = true;
         document.getElementById('txt1').disabled = false;
     }
     else{
         document.getElementById('sel1').disabled = false;
         document.getElementById('txt1').disabled = true;
     }
 }
 function enableText(checked){
     if(!checked){
         document.getElementById('sel2').disabled = true;
         document.getElementById('txt2').disabled = false;
     }
     else{
         document.getElementById('sel2').disabled = false;
         document.getElementById('txt2').disabled = true;
     }
 }
 </script>

.HTML

 <form name=sr2 method=post>
      <select name="pt" id="sel1">
           <option>test</option>
      </select>
      <input type="checkbox" name="cb1" checked="checked" onclick="enableText(this.checked)">
      Others
      <input type="text" name="pt" id="txt1" disabled="disabled">
      <select name="dept" id="sel2">
           <option>test</option>
      </select>
      <input type="checkbox" name="cb2" onclick="enableText(this.checked)"  checked="checked">
      Others
      <input type="text" name="dept" id="txt2" disabled="disabled">
 </form>

我的问题是如何在 js 中设置函数以指示cb1仅启用txt1并禁用sel1，cb2仅启用txt2并禁用sel2？ 我的代码可以工作，但由于某种原因，它启用了txt1和txt2，并同时禁用了sel1和sel2。

任何帮助将不胜感激。

您创建了两个同名的函数：enableText 。简化代码：

function enableText(checked, index){
     var sel = true, txt = false;
     if(checked) {
         sel = false;
         txt = true;
     }
     document.getElementById('sel' + index).disabled = sel;
     document.getElementById('txt' + index).disabled = txt;
}

在您的 HTML 中：

onclick="enableText(this.checked, 1)"

并更改下一项的第二个参数。

带有三元的函数的第二个版本，但目的相同：

function enableText(checked, index) {
     document.getElementById('sel' + index).disabled = (checked ? false : true);
     document.getElementById('txt' + index).disabled = (checked ? true : false);
}
相关文章：