即使在位置输入被擦除后，按钮仍保持启用状态答案

【问题标题】：Button remains enabled even after the location input is erased即使在位置输入被擦除后，按钮仍保持启用状态
【发布时间】：2022-01-05 00:44:08
【问题描述】：

重现步骤：

选择一个日期。
在位置输入中键入ABC。该按钮将被启用。
从位置输入中删除 ABC。

现在位置为空，但按钮已启用。所以现在任何想要绕过位置字段的人都可以。我怎样才能防止这种情况发生？

function testFinish() {
  var datepicker = document.getElementById('datepicker');
  var location = document.querySelector('#location');
  var btn = document.getElementById('btn');
  if (location && location.value && datepicker.value)
    btn.disabled = false;
}

$('#datepicker').datepicker();

button:disabled,
button[disabled] {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

button {
  background: red;
  color: black;
  border: 0;
  font-weight: 900;
  width: 194px;
  height: 40px;
  outline: none;
  cursor: pointer;
  margin-top: 20px;
}

input {
  appearance: none;
  height: 28px;
  text-align: center;
  width: 63px;
  line-height: 24px;
  font-size: 20px;
  border-radius: 5px;
  border-color: orangered;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/1.0.10/datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/1.0.10/datepicker.min.css" />

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="col-lg-6 col-md-12 col-12">
  <p><input type="text" onchange="testFinish()" id="datepicker" style="width: 120px;" autocomplete="off" placeholder="Date" readonly /></p>

  <input class="location" id="location" type="text" placeholder="location" onkeyup="testFinish();">

  <div class="field">
    <button type="submit" id="btn" name="ik" disabled onsubmit="alert('SUBMITTED')">Donate</button>
  </div>

</div>

【问题讨论】：

请删除所有与您的问题没有直接关系的代码。
我必须同意，向我们抛出与您的问题无关的数百行代码，这与仅提供图像相反 :) 请edit 和 minimal我的意思是创建一个minimal reproducible example
抱歉，我已经尽量缩短了

标签： javascript html

【解决方案1】：

如果要重新禁用按钮，请将disabled 设置为true。您只是启用它。

if (location && location.value && datepicker.value)
    btn.disabled = false;
else
    btn.disabled = true; // <------

或单排

btn.disabled = !location || !location.value || !datepicker.value

【讨论】：