基于复选框状态启用/禁用输入框的问题排查

嘿，我一眼就瞅出问题所在啦！你的脚本放在<head>标签里，这时候浏览器还没来得及渲染页面里的<input id="average_price">元素呢——当脚本执行时，这个复选框还不存在，document.getElementById('average_price')会返回null，自然没法绑定onchange事件，所以点击复选框根本不会触发任何状态变化。

几种可行的修复方案 #

方案1：把脚本移到页面底部（</body>前） #

这是最简单直接的办法，等所有DOM元素都加载完成后再执行脚本：

<head>
</head>
<center>
  <form action="/custom" method="POST">
    <h2>Generate Custom Report</h2>
    <br>
    <input type="checkbox" id="average_price" name="average_price">
    <b>Average Price</b>
    <br>
    <input type="text" id="average_price_symbol" name="average_price_symbol" placeholder="symbol" disabled>
    <br>
    <input type="submit" value="RUN">
  </form>
</center>
<script>
  document.getElementById('average_price').onchange = function() {
    document.getElementById('average_price_symbol').disabled = !this.checked;
  };
</script>

方案2：用DOMContentLoaded事件包裹脚本 #

如果想把脚本留在<head>里，可以监听DOM加载完成的事件，确保元素存在后再绑定事件：

<head>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      document.getElementById('average_price').onchange = function() {
        document.getElementById('average_price_symbol').disabled = !this.checked;
      };
    });
  </script>
</head>
<center>
  <form action="/custom" method="POST">
    <h2>Generate Custom Report</h2>
    <br>
    <input type="checkbox" id="average_price" name="average_price">
    <b>Average Price</b>
    <br>
    <input type="text" id="average_price_symbol" name="average_price_symbol" placeholder="symbol" disabled>
    <br>
    <input type="submit" value="RUN">
  </form>
</center>

方案3：给脚本添加defer属性 #

defer属性会告诉浏览器延迟脚本执行，直到DOM加载完成，同样可以放在<head>里：

<head>
  <script defer>
    document.getElementById('average_price').onchange = function() {
      document.getElementById('average_price_symbol').disabled = !this.checked;
    };
  </script>
</head>
<center>
  <form action="/custom" method="POST">
    <h2>Generate Custom Report</h2>
    <br>
    <input type="checkbox" id="average_price" name="average_price">
    <b>Average Price</b>
    <br>
    <input type="text" id="average_price_symbol" name="average_price_symbol" placeholder="symbol" disabled>
    <br>
    <input type="submit" value="RUN">
  </form>
</center>

另外说一句，你写的状态切换逻辑是没问题的——disabled = !this.checked正好实现了“勾选启用、取消勾选禁用”的需求，只要解决脚本执行时机的问题，功能就能正常工作啦！

内容的提问来源于stack exchange，提问作者Harrison