0

您好 StackExchange 的好心人，

我遇到了一些我正在使用的代码的绊脚石，我已经包含了我正在使用的 HTML 的折叠示例，希望您能够帮助我将剩余的 jQuery 部分拼凑起来。

这里的目标是保持提交按钮处于禁用状态，直到任何具有 .Required 类的元素具有某种值或其他属性，例如“已检查”。所以解决方案需要涵盖 select、radio、checkbox、textbox 和 textarea 元素（这些元素将具有Required 类）。

<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>

如果所有字段都是相同类型，我知道如何处理这个问题，但在当前情况下苦苦挣扎。任何建议一如既往地感激不尽。

非常感谢

4

2 回答 2

3

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

于 2013-07-08T02:49:14.383 回答
1

这应该这样做;）

$(document).ready(function () {
    $(".Required").on('input', function() {
        reqAll();
    });
    $(".Required").on('change', function() {
        reqAll();
    });
    var reqAll = function () {
        var elements = document.getElementsByClassName('Required');
        for (var i = 0; i < elements.length; i++) {
            switch(elements[i].type) {
                case "radio":
                    if( elements[i].checked == false) {
                        $('.button').attr('disabled', true);
                        return;  // bail if unselected
                    }
                    break;
                case "select-one":
                    if( elements[i].selectedIndex == 0) {
                        $('.button').attr('disabled', true);
                        return;     // bail if unselected
                    }
                    break;
                default:
                    if( elements[i].value == "" ) {
                        $('.button').attr('disabled', true);
                        return;     // bail if empty
                    }
            }
        }
        $('.button').attr('disabled', false);
    }
});
于 2013-07-08T02:12:55.773 回答