为什么onchange可正常切换按钮disabled状态，绑定onmouseover却不生效？

问题根本原因 #

onmouseover 本身没有限制读取输入框值的能力，你遇到的问题和事件本身的权限无关，是以下三个问题共同导致的：

• disabled 元素无法触发鼠标事件：所有设置了disabled属性的表单元素，浏览器默认会屏蔽所有交互事件，包括onmouseover、onclick等。你初始给提交按钮加了disabled属性，鼠标移到按钮上根本不会触发你绑定的myFunction，自然不会有任何效果。
• 数值比较逻辑错误：输入框的value属性返回的是字符串类型，你直接用字符串和"5"做比较，会按Unicode编码逐位对比，比如输入10的时候，"10" >= "5"的结果是false，因为第一位字符"1"的编码比"5"小，这会导致大于等于5的数值判断完全不符合预期。
• toggleAttribute逻辑不稳定：toggleAttribute的作用是有该属性就移除，没有就添加，结合触发频率很高的mouseover事件使用，很容易出现状态反复横跳的问题，判断逻辑会完全失控。

修复方案 #

如果非要用mouseover触发校验，可以把事件绑定在按钮的父容器上（普通元素不会被disabled属性影响事件触发），同时修正判断逻辑，直接明确设置disabled状态，不要用toggle：

<form action="/action_page.php">
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
  <!-- 把事件绑定在父容器上，避免disabled属性屏蔽事件 -->
  <span onmouseover="myFunction()">
    <input disabled id="submit" type="submit">
  </span>
  <p id="number"></p>
</form>

<script>
function myFunction() {
  const quantityInput = document.getElementById("quantity");
  const submitBtn = document.getElementById("submit");
  // 转成数字再做比较，空值默认转成0
  const quantityNum = Number(quantityInput.value) || 0;
  // 直接设置disabled状态，逻辑更清晰可控
  submitBtn.disabled = quantityNum < 1 || quantityNum > 5;
}
</script>

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