Question

我有三个复选框（复选框1,2和3）。我想在单击复选框1时禁用“复选框3”，单击复选框2时启用复选框3。这工作正常，但在为复选框3添加隐藏字段后，禁用功能无效。请参阅下面的代码。有人可以帮帮我吗？

<html>
<script> 
 function callFun1()
 { 
   document.getElementById('three').disabled=true; 
 }   
 function callFun2()
 { 
   document.getElementById('three').disabled=false; 
 }
</script>
  <head>     
    <body>             
      <table border="2" align="center">     
         <tr><td>CheckBox 1  <input type="checkbox" name="one" id="one" value="true" onClick="callFun1()"></td></tr>         
         <tr><td>CheckBox 2  <input type="checkbox" name="two" id="two" value="true" onClick="callFun2()"></td></tr>     
         <tr><td> CheckBox 3 <input type="hidden" name="three" id="three" value=""/>
                             <input type="checkbox" name="three" id="three" value="true" /> </td> </tr>     
      </table>        
    </body> 
  </head>  
</html>

提前致谢！

Answer 1

你有重复的ID。 ID在整个页面上应该是唯一的。将其中一个输入的ID更改为不同的内容，它应该可以解决您的问题。

取决于浏览器，getElementById方法通常会返回带有该ID的DOM中的第一个元素。在这种情况下，您可能会禁用隐藏的输入，而不是根据需要禁用复选框。

在这种情况下，您可以完全避免使用隐藏输入，只需使用以下代码将复选框设置为readonly（在取消选中后）。

function callFun1()
 { 
   document.getElementById('three').readonly=false; 
 }
function callFun2()
 { 
   document.getElementById('three').check=false; 
   document.getElementById('three').readonly=true; 
 }

Answer 2

因为您添加了一个具有相同ID的字段，document.getElementById('three')只返回第一个字段，因为ID应该是唯一的

添加隐藏类型后，复选框无法禁用

2 个答案: