當輸入字段不為空且復選框選中時啟用提交按鈕

Question

概述

我目前正在從事一個涉及注冊頁面的項目。 我在客戶端使用引導程序和 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');
        }
    });
});

• 第二種方法來自這個答案。 這也不起作用:(

---

任何幫助表示贊賞。 提前致謝。

---

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

在您的極端情況下，您必須將輸入與自定義 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>