1

私は小さな形をしています。すべてのラジオボタンが選択されているときに送信ボタンを有効にしたい。

以下は私のコードhtmlです

<form action="#" id="form1" method="post">
                <ul>
                    <li>
                        <h3>Here’s what I want:<strong class="result1"></strong></h3>
                        <div>
                        <span><input type="radio" value="Cash Back rewards" name="want" id="01"  /><label for="01">Cash Back rewards</label></span>
                        <span><input type="radio" value="Travel rewards" name="want" id="02" /><label for="02">Travel rewards</label></span>
                        <span><input type="radio" value="Gas rewards" name="want" id="03" /><label for="03">Gas rewards</label></span>
                        <span><input type="radio" value="Shopping rewards" name="want" id="04" /><label for="04">Shopping rewards</label></span>
                    </div>
                    </li>

                    <li>
                        <h3>Here’s my credit story: <strong class="result2"></strong></h3>
                        <div>
                        <span><input type="radio" value="I’m new to credit" name="story" id="05" /><label for="05">I’m new to credit</label></span>
                            <span><input type="radio" value="I pay my bills on time" name="story" id="06" /><label for="06">I pay my bills on time</label></span>
                        <span><input type="radio" value="I’ve had credit issues in the past" name="07" id="issues" /><label id="07">I’ve had credit issues in the past</label></span>
                        </div>
                    </li>

                    <li>
                        <h3>Here’s what I carry:</h3>
                        <span><input type="radio" value="I have a credit card with a good record" name="carry" id="08" /><label for="08">I have a credit card with a good record</label></span>
                        <span><input type="radio" value="I don’t have a credit card with a good record" name="carry" id="09" /><label for="09">I don’t have a credit card with a good record</label></span>

                    </li>
                </ul>
                <input type="submit" value="" name="" class="find" />
                </form>

私はJavaScriptが苦手です。教えてください。

liが修正されていない場合、もう1つ動的に生成されるので、私がしなければならないことがあります。基本的に、すべてのliは1つの質問であり、ラジオボタンはオプションです。したがって、質問は動的に生成されます。修正されない

4

1 に答える 1

3

このような何かがトリックを行います：

$('#form1 :radio').click(function() {
    var disabled = $('#form1 li').filter(function() { return $(':radio:checked', this).length == 0; }).length > 0;
    $('#form1 .find').prop('disabled', disabled);
});

これは、オプションがチェックされている場合にのみ無効状態が変化するため、ページの読み込み時に送信ボタンが無効になっていることを前提としています。もちろん、DOMReady中に同じチェックを行うこともできます（この場合、リスナー関数を抽出します）が、ロード中に手動でマークアップを設定することをお勧めします。

デモ

disabled変数は、フォーム内のすべての要素を選択し、「チェックされたラジオボタンを含まない」liフィルター基準を満たす要素のみに縮小し、縮小されたコレクションに要素があるかどうかを確認することによって設定されます。

1.6未満のjQueryバージョンを使用している場合は、.attr代わりにを使用.propして無効状態を設定します。

于 2012-08-07T07:40:41.467 に答える