[英]Enable submit button when the input fields are not empty and the checkbox checked
我目前正在从事一个涉及注册页面的项目。 我在客户端使用引导程序和 javascript/jquery。
我不希望用户在填写每个输入字段并选中复选框之前提交表单。 默认情况下,提交按钮被禁用。 当字段不为空时,我成功激活了提交按钮。 但是我的问题在于复选框,当输入字段不为空并且选中复选框时激活提交按钮。
这是一个代码片段,可以更好地阐明我的问题(消除此问题的不必要字段)
$(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');
}
});
});
任何帮助表示赞赏。 提前致谢。
对于增强的用户体验,假设用户在填写输入字段之前选中了复选框。 在这种极端情况下,用户必须单击其他地方才能激活提交按钮。 这就是为什么键码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>
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>
在您的极端情况下,您必须将输入与自定义 function 显式绑定。 在 function 中,我们必须检查输入和支票簿的值。 希望这个解决方案对你有用。
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.