当输入字段不为空且复选框选中时启用提交按钮

Question

概述

我目前正在处理一个涉及注册页面的项目。我在客户端使用 bootstrap 和 javascript/jquery。

问题

我不希望用户在填写每个输入字段并选中复选框之前提交表单。默认情况下，提交按钮被禁用。当字段不为空时，我成功激活了提交按钮。但是我的问题在于复选框，当输入字段不为空并且复选框被选中时激活提交按钮。

---

这是一个代码 sn-p 以更好地澄清我的问题（为此问题消除了不必要的字段）

---

$(document).ready(function() {
  $('.register input').keyup(function() {

    var empty = false;
    $('.register input').each(function() {
      if ($(this).val().length == 0) {
        empty = true;
      }
    });

    if (empty) {
      $('#register').attr('disabled', 'disabled');
    } else {
      $('#register').removeAttr('disabled');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- username input -->
<div class="form-outline mb-4 register">
  <input type="text" id="registerUsername" class="form-control" />
  <label class="form-label" for="registerUsername">Username</label>
</div>

<!-- Password input -->
<div class="form-outline mb-4 register">
  <input type="password" id="registerPassword" class="form-control" />
  <label class="form-label" for="registerPassword">Password</label>
</div>

<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
  <input class="form-check-input me-2" type="checkbox" value="" id="registerCheck" aria-describedby="registerCheckHelpText" />
  <label class="form-check-label" for="registerCheck">
    I have read and agree to the terms
  </label>
</div>

<!-- Submit button -->
<button type="submit" id="register" disabled="disabled" class="btn btn-dark btn-block mb-3">Register</button>

我尝试了什么？

好吧，我在 Stackoverflow 上找到了答案，并尝试根据我的需要调整它们。以下是我尝试过的两种解决方案及其缺陷。不幸的是，它没有按预期工作。

• 我尝试检查复选框是否被选中，就像我对输入字段所做的那样（我忘记了这个的来源）

这是我使用的代码：

$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        if($(this).is(":not(:checked)")){
            $('#register').attr('disabled', 'disabled');
        }
    });
});

• 第二种方法来自这个answer。这也没有用:(

---

感谢任何帮助。提前致谢。

---

Answer 1

对于增强的用户体验，假设用户在填写输入字段之前选中了复选框。在这种极端情况下，用户必须单击其他地方才能激活提交按钮。这就是应该存在keyup 函数的原因。

下面的代码应该足够了

// Enabling the register button only when the register fields are not empty
$(document).ready(() => {
  $("input[type=text]").keyup(onFormUpdate);
  $("input[type=password]").keyup(onFormUpdate);
  $("input[type=checkbox]").change(onFormUpdate);
})

function onFormUpdate() {
  const registerUsername = $("#registerUsername").val();
  const registerPassword = $("#registerPassword").val();
  const acceptedTnC = $("#registerCheck").prop('checked');

  if (registerUsername && registerPassword && acceptedTnC) {
    $("#register").removeAttr("disabled");
  } else {
    $("#register").attr("disabled", "disabled");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" onchange="onFormUpdate()">

  <!-- username input -->
  <div class="form-outline mb-4 register">
    <input type="text" id="registerUsername" class="form-control" />
    <label class="form-label" for="registerUsername">Username</label>
  </div>

  <!-- Password input -->
  <div class="form-outline mb-4 register">
    <input type="password" id="registerPassword" class="form-control" />
    <label class="form-label" for="registerPassword">Password</label>
  </div>

  <!-- Checkbox -->
  <div class="form-check d-flex justify-content-center mb-4">
    <input class="form-check-input me-2" type="checkbox" value="" id="registerCheck" aria-describedby="registerCheckHelpText" />
    <label class="form-check-label" for="registerCheck">
    I have read and agree to the terms
  </label>
  </div>

  <!-- Submit button -->
  <button type="submit" id="register" disabled="disabled" class="btn btn-dark btn-block mb-3">Register</button>

</form>

Answer 2

function funCheck() {
  if (
    $("#registerCheck").is(":checked") &&
    $("#registerUsername").val().length > 0 &&
    $("#registerPassword").val().length > 0
  ) {
    $("#register").removeAttr("disabled");
  } else {
    $("#register").attr("disabled", "disabled");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- username input -->
<div class="form-outline mb-4 register">
  <input
    type="text"
    id="registerUsername"
    class="form-control"
    onchange="funCheck()"
  />
  <label class="form-label" for="registerUsername">Username</label>
</div>

<!-- Password input -->
<div class="form-outline mb-4 register">
  <input
    type="password"
    id="registerPassword"
    class="form-control"
    onchange="funCheck()"
  />
  <label class="form-label" for="registerPassword">Password</label>
</div>

<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
  <input
    class="form-check-input me-2"
    type="checkbox"
    value=""
    id="registerCheck"
    aria-describedby="registerCheckHelpText"
    onchange="funCheck()"
  />
  <label class="form-check-label" for="registerCheck">
    I have read and agree to the terms
  </label>
</div>

<!-- Submit button -->
<button
  type="submit"
  id="register"
  disabled="disabled"
  class="btn btn-dark btn-block mb-3"
>
  Register
</button>

Answer 3

在您的极端情况下，您必须将输入与自定义函数显式绑定。在该函数中，我们必须检查 input 和 checkbok 的值。希望此解决方案对您有用。

$(document).ready(() => {
  $("input[type=text]").keyup(onFormUpdate);
  $("input[type=password]").keyup(onFormUpdate);
  $("input[type=checkbox]").change(onFormUpdate);
})
function onFormUpdate() {
  const userName = $("#registerUsername").val();
  const password = $("#registerPassword").val();
  const acceptedTnC = $("#registerCheck").prop("checked");

  if (userName && password && acceptedTnC) {
    $("#register").removeAttr("disabled");
  } else {
    $("#register").attr("disabled", "disabled");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-outline mb-4 register">
  <input type="text" id="registerUsername" class="form-control" />
  <label class="form-label" for="registerUsername">Username</label>
</div>

<!-- Password input -->
<div class="form-outline mb-4 register">
  <input type="password" id="registerPassword" class="form-control" />
  <label class="form-label" for="registerPassword">Password</label>
</div>

<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
  <input
    class="form-check-input me-2"
    type="checkbox"
    value=""
    id="registerCheck"
    aria-describedby="registerCheckHelpText"
  />
  <label class="form-check-label" for="registerCheck">
    I have read and agree to the terms
  </label>
</div>

<!-- Submit button -->
<button
  type="submit"
  id="register"
  disabled="disabled"
  class="btn btn-dark btn-block mb-3"
>
  Register
</button>