禁用提交按鈕，直到填寫輸入字段

Question

這是我的網站鏈接，在這里我一直在嘗試使用jquery代碼啟用/禁用按鈕，但未能成功實現。 您可以檢查元素以查看代碼，並且在那里輸出不正確

Answer 1

嘗試以下代碼：

$(document).ready(function () {
    var noOfRadio = 0;
    var names = [];

    $('form :radio').each(function () {
        if (!names[$(this).attr('name')]) {
            names[$(this).attr('name')] = 1;
            noOfRadio++;
        }
    });
    console.log(noOfRadio);
    $('form').on('change', ':radio', function () {
        console.log($('form').find('input[type="radio"]:checked').length);
        if ($('form').find('input[type="radio"]:checked').length === noOfRadio) {
            console.log('Enable');
            $('#input_2').prop('disabled', false);
        } else {
            $('#input_2').prop('disabled', true);
        }
    });
});

演示： https : //jsfiddle.net/tusharj/u0mLLo3L/

Answer 2

Tushar的解決方案運行完美。 但我建議您使用正式/標准方法進行驗證。

不要禁用提交按鈕。 只需使用html之類的每個單選按鈕的required屬性即可

<input id="input_5_0_1" class="form-radio" type="radio" required="required"
 name="customer_appointment" value="Good" />

或使用js（快捷方式），例如

$(document).ready(function () {    
    $('form input').attr('required','required');        
});

小提琴演示

這樣，盡管您的按鈕未被禁用，但您必須填寫所有字段才能提交。

但是，如果必須使用按鈕禁用方法，則可以遵循@Tushar的上述答案

編輯此解決方案僅適用於支持html5的現代瀏覽器。 除此鏈接http://html5readiness.com/以外的瀏覽器（例如Internet Explorer 4,5,6）不支持HTML5

Answer 3

為什么您的“提交”按鈕被禁用或呈現為禁用狀態。 我檢查了螢火蟲並得到了這個。 通過firebug，如果我刪除了disable =“ disabled”，它將意味着發布。

<div class="form-buttons-wrapper" style="text-align:left">
  <button id="input_2" class="form-submit-button form-submit-button-light_rounded" name="submit" type="submit"> Submit </button>
</div>