Using jQuery, keep a form's submit button disabled until all of the required textbox, radio, checkbox elements have a value (or are checked)

Question

Hello Kind People of StackExchange,

I have encountered a stumbling block over some code I'm working with and I have included a collapsed example of the HTML I am working with in the hope that you might be able to kindly help me piece together the remaining jQuery portion.

The objective here is to keep the submit button disabled until ANY element with a class of .Required has some sort of value or other attribute such as "checked". So the solution needs to cover select, radio, checkbox, textbox and textarea elements (those elements will have the Required class).

<script  src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<form action="someaction/action" method="post" class="DisableSubmit">

    <input type="text" name="title" maxlength="100" autofocus="true" placeholder="Title..." value="" style="width: 90%;" />

    <textarea name="text" rows="3" style="width: 90%;"></textarea>

    <input type="text" name="title" maxlength="100" placeholder="Location..." value="" class="Required" style="width: 90%;" />
    <p class="explain">Required</p>

    <label for="i_agree">
        <span class="label">I agree to the terms and conditions:</span>
        <input type="checkbox" id="i_agree" class="Required" />
    </label>
    <p class="explain">Required</p>

    <input type="submit" class="button" value="Submit" />
</form>

I know how to handle this if all the fields are the same type, but struggling with this current scenario. Any advice as ever is gratefully received.

Many thanks

Answer 1

I'd use more HTML5-like style

$(document).ready(function() {
    var required = $('[required]');
    // bind change for all you just click, and keyup for all textfields
    required.bind('change keyup', function() {
        var flag = 0;
        // check every el in collection
        required.each(function() {
            if ($(this).not(':checkbox, :radio').val() || $(this).filter(':checked').val()) flag++;
        });
        // if number of nonempty (nonchecked) fields == nubmer of required fields minus one excess radio input
        if (flag==required.length-1) $('input[type=submit]').prop('disabled',false);
        else $('input[type=submit]').prop('disabled', true);
    });
});

working DEMO

EDIT As my wife noticed (thank you, I love you, darling) this example is not working with checkboxes and radio buttons correctly, because even unchecked, they always return their positive value.

So I updated my code and demo and I want to explain the difference. First of all, I changed condition, now it looks like if ($(this).not(':checkbox, :radio').val() || $(this).filter(':checked').val()) - in the 1st part we delete all checkboxes and radio buttons from collection, and in the 2nd we check value of all "checked" inputs (that means all checked inputs, deleted in 1st part).

The next untidy step is to use a number, like required.length-1 to reduce number of all unnecessary radio fields manually

I'm still trying to find better solution, but now you can check this new demo