0

StackExchange の親切な皆さん、こんにちは。

作業中のコードでつまずきに遭遇したため、作業中の HTML の折りたたまれた例を含めました。残りの jQuery 部分をつなぎ合わせるのを親切に手伝ってくれることを願っています。

ここでの目的は、クラスが .Required のいずれかの要素が何らかの値または「checked」などの他の属性を持つまで、送信ボタンを無効にしておくことです。そのため、ソリューションは 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

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 に答える