复选框使用JavaScript功能禁用/启用查询

Question

I'm fairly new to JavaScript and I have been Googling all day for this but I only found how to enable and disable one textbox using one checkbox. I tweaked the code a bit to work with what I want and here is what I got. I'm thinking of instructing JS function to follow only the id of the checkbox, but I can't seem to figure out how to do it.

Here is my code:

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>

My question is how can I set the function in js to instruct cb1 to only enable txt1 and disable sel1 and cb2 to only enable txt2 and disable sel2 ? My code works but, for some reason, it enables txt1 and txt2 and disables sel1 and sel2 at the same time.

Any help is greatly appreciated.

Answer 1

You have created two functions with the same name: enableText . Simplifying your code:

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

And in your HTML:

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

And change the 2nd parameter for the next items.

A second version of your function with ternaries, but with the same purpose:

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