Question

我是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。

非常感谢任何帮助。

Answer 1

您已创建两个具有相同名称的函数：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);
}

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

1 个答案: