如何用jQuery/Javascript实现页面加载禁用提交按钮、输入时启用？

没问题，这就帮你搞定这个需求！首先得把你的HTML结构补全（你提供的代码里输入框和提交按钮都不完整），然后配合JavaScript就能轻松实现啦。

完整代码示例 #

<div class="container" id="frmtoken">
  <form method="POST" action="authorize.php">
    <div class="featured-desc-left">
      <p>Enter token and wait to be connected.</p>
      <p><strong>note: Only one device per token is allowed</strong></p>
    </div>
    <div class="two columns featured-desc-left">
      <p>
        <!-- 补全输入框并添加id，方便JS获取元素 -->
        <input type="text" id="tokenInput" placeholder="Enter your token">
        <!-- 添加提交按钮，初始设置为禁用状态 -->
        <button type="submit" id="submitBtn" disabled>Submit</button>
      </p>
    </div>
  </form>
</div>

<script>
// 页面加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 获取输入框和提交按钮元素
  const tokenInput = document.getElementById('tokenInput');
  const submitBtn = document.getElementById('submitBtn');

  // 定义切换按钮状态的函数
  function toggleSubmitStatus() {
    // 过滤输入内容两端的空格，判断是否有有效内容
    const hasValidContent = tokenInput.value.trim() !== '';
    // 根据是否有有效内容，切换按钮的禁用状态
    submitBtn.disabled = !hasValidContent;
  }

  // 页面加载完成时先执行一次，确保按钮初始为禁用状态
  toggleSubmitStatus();

  // 监听输入框的输入事件（输入、删除、粘贴等操作都会触发）
  tokenInput.addEventListener('input', toggleSubmitStatus);
});
</script>

逻辑说明 #

• 给输入框和提交按钮添加了id，方便JavaScript快速定位元素
• 提交按钮初始就加上disabled属性，页面一加载就是禁用状态
• toggleSubmitStatus函数会判断输入框是否有有效内容（用trim()过滤纯空格的情况），实时切换按钮状态
• 监听输入框的input事件，只要内容有变化就触发状态判断，保证按钮状态和输入内容同步

这样就能实现你想要的效果：页面刚加载时提交按钮是灰色禁用状态，只要输入框里有有效内容，按钮就自动启用；如果把内容删空，按钮会再次变回禁用状态~

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