我目前正在工作一个项目，涉及一个注册页。我正在客户端使用bootstrap和JavaScript/jQuery。
我不希望用户在填写每个输入字段并选中一个复选框之前提交表单。默认情况下，“提交”按钮是禁用的。当字段不为空时，我成功地激活了submit按钮。然而，我的问题在于checkbox，即当输入字段不为空并且选中了复选框时激活submit按钮。
这是一个代码片段，用来更好地澄清我的问题（消除了这个问题不必要的字段）
null
$(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>null
好吧，我在Stackoverflow上找到了答案，并试着根据我的需要调整它们。下面是我尝试过的两种解决方案以及它们的缺陷。不幸的是，这并没有像预期的那样奏效。
下面是我使用的代码：
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).is(":not(:checked)")){
$('#register').attr('disabled', 'disabled');
}
});
});
感谢任何帮助。提前道谢。
null
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>
在您的边缘案例场景中，您必须将输入与自定义函数显式绑定。在该函数中，我们必须chack输入和checkbok的值。希望这个解决方案对你有用。
null
$(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>