在 onSubmit 事件返回 false 并发出警报后，提交按钮会自动禁用。在 onchange 事件之后也无法启用它

Posted 2023-03-30

【中文标题】在 onSubmit 事件返回 false 并发出警报后，提交按钮会自动禁用。在 onchange 事件之后也无法启用它

【英文标题】：Submit button getting disabled automatically after onSubmit event returns false with alert. Following onchange event also not able to enable it

【发布时间】：2021-12-23 08:41:42

【问题描述】：

在 onSubmit 事件返回 false 并发出警报后，提交按钮会自动禁用。后来onchange事件也无法开启。

下面是javascript和html

在没有复选框的情况下提交表单时，会弹出一个警报并且禁用提交按钮。在选中框提交按钮无法启用它。如何确保提交按钮保持启用或 onchange 事件启用它？

感谢任何潜在客户。

            
<script type="text/javascript">
  function checkme() 
        if (!document.form.agree.checked) 
            missinginfo = "You must agree to the condition\n Please tick the checkbox and try again.";
            alert(missinginfo);
            return false;
        
        else 
            return true;
        
    
</script>

            <form name="form" id="form"  action="/gl" onSubmit="return checkme();" method="post">
                
                           <input type="checkbox" id="agree" onchange="document.getElementById('submit-form').disabled = !this.checked;"/> I AGREE
                           
                           <div class="row">
                              <div class="col-sm-4 col-sm-offset-8 col-md-3 col-md-offset-9 input-group">
                                  <button type="submit" value="Submit" class="btn btn-primary" id="submit-form">Submit</button>
                               </div>
                           </div>

`

【问题讨论】：

你有什么问题？

如何确保提交按钮保持启用或 onchange 事件启用它？ JS函数返回false后。

【参考方案1】：

首先，您应该考虑移动您的事件监听您的脚本，而不是使用onSubmit()

然后您可以在脚本上选择您的输入和按钮，并为您的输入添加一个事件侦听器，因此每次更改时，它都会检查复选框是否被选中（checkBox.checked）。如果未选中，则禁用按钮 (button.disabled = !checkBox.checked;)

const checkBox = document.getElementById("agree");
const button = document.getElementById("submit-form");

checkBox.addEventListener("input", () => 
  button.disabled = !checkBox.checked;
);

<form name="form" id="form" action="/gl" onSubmit="return checkme();" method="post">
  <input type="checkbox" id="agree" /> I AGREE
  <div class="row">
    <div class="col-sm-4 col-sm-offset-8 col-md-3 col-md-offset-9 input-group">
      <button disabled type="submit" value="Submit" class="btn btn-primary" id="submit-form">
            Submit
          </button>
    </div>
  </div>
</form>