禁用jQuery的提交按鈕，直到所有字段都具有值（輸入，單選，選擇，復選框）

Question

我有一個包含幾種不同字段類型的表單，所有這些字段類型都需要在提交之前完成。 我禁用了提交按鈕，並且一旦所有字段都具有值，便想刪除禁用的屬性。

我從以前的問題中獲得了有關此功能與收音機和復選框一起使用的示例，並且我閱讀了一些答案，這些答案說明了如何僅使用<input>字段來實現此目的：

• 禁用提交按鈕，直到所有字段都具有值
• 禁用提交按鈕，直到所有表單輸入都包含數據

但是，有什么方法可以使用jQuery檢查所有字段類型是否具有值？ 包括<select>和<textarea>字段？

這是我表單的基本版本的Codepen ，這是我的HTML：

<div class="contact-form">
    <div class="contact-form__row">
        <p>Text field</p>
        <input type="text" />
    </div>
    <div class="contact-form__row">
        <p>Radio fields</p>
        <label for="radio-1">Radio 1</label>
        <input id="radio-1" type="radio" name="radio-option" />
        <label for="radio-2">Radio 2</label>
        <input id="radio-2" type="radio" name="radio-option" />
    </div>
    <div class="contact-form__row">
        <p>Checkbox fields</p>
        <label for="checkbox-1">Checkbox 1</label>
        <input id="checkbox-1" type="checkbox" />
        <label for="checkbox-2">Checkbox 2</label>
        <input id="checkbox-2" type="checkbox" />
    </div>
    <div class="contact-form__row">
        <p>Select options</p>
        <select id="my-select" name="my-select">
            <option value="a">Option A</option>
            <option value="b">Option B</option>
        </select>
    </div>
    <div class="contact-form__row">
        <p>Text area</p>
        <textarea></textarea>
    </div>
    <div class="contact-form__row">
        <input type="submit" value="Submit" disabled />
    </div>
</div>

這可能嗎？

Answer 1

您可以使用jQuery這樣操作：（在Codepen中用此代碼替換所有JavaScript，我已經在您的Codepen中對其進行了測試）

<script>
$(function() {
    $('.contact-form').on('input',':input',function() {
        var inputs = $('.contact-form :input');
        var num_inputs = inputs.length;
        var num_filled = inputs.filter(function() { return !!this.value }).length;
        $('.contact-form :submit').prop('disabled',(num_filled<num_inputs));
    });
});
</script>

祝好運！

Answer 2

幾點評論：

1. 在下一個代碼段中，我假設必須先填寫所有輸入（單選按鈕除外），然后才能提交表單，這不一定代表所有現實情況。
2. 如上所述，對無線電（在此示例中僅2個）進行了特殊處理，因為每個組只能選擇一個。
3. 關於<select> ，如果選擇了一個空選項（如果存在），則將其視為無效。 在此示例中，您的select標記始終具有非空值，我在標記中添加了另一個值以顯示其行為。

讓我知道是否有效

 $(document).ready(function() { $(":input").on('input', function(){validate();}); $(":input").on('change', function(){validate();}); }); function validate() { var $submitButton = $("input[type=submit]"); var isValid = true; if($(':checkbox:checked').length != $(':checkbox').length) isValid = false; else if($(':radio:checked').length == 0) isValid = false; else{ $('input:text, textarea').each(function() { if($(this).val() == ''){ isValid = false; return false; } }); if(isValid){ $('select').each(function() { if($(this).val() == ''){ isValid = false; return false; } }); } } $submitButton.prop("disabled", !isValid); } 

 .contact-form { width: 400px; margin: 50px; } .contact-form__row { padding: 0 0 10px; margin: 0 0 10px; border-bottom: 1px solid grey; } p { font-weight: bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="contact-form"> <div class="contact-form__row"> <p>Text field</p> <input type="text" /> </div> <div class="contact-form__row"> <p>Radio fields</p> <label for="radio-1">Radio 1</label> <input id="radio-1" type="radio" name="radio-option" /> <label for="radio-2">Radio 2</label> <input id="radio-2" type="radio" name="radio-option" /> </div> <div class="contact-form__row"> <p>Checkbox fields</p> <label for="checkbox-1">Checkbox 1</label> <input id="checkbox-1" type="checkbox" /> <label for="checkbox-2">Checkbox 2</label> <input id="checkbox-2" type="checkbox" /> </div> <div class="contact-form__row"> <p>Select options</p> <select id="my-select" name="my-select"> <option value="a">Option A</option> <option value="b">Option B</option> </select> <select id="my-select" name="my-select"> <option></option> <option value="a">Option A</option> <option value="b">Option B</option> </select> </div> <div class="contact-form__row"> <p>Text area</p> <textarea></textarea> </div> <div class="contact-form__row"> <input type="submit" value="Submit" disabled /> </div> </div>