1

私のアプリケーションには、jQuery を使用してフォローアップの質問の表示を切り替え、jQuery Validation プラグインを使用して特定の質問を必須にする動的フォームがあります。私の問題は、以前に回答された質問でフォームが読み込まれると、正しいクラスが表示されないことです。

「はい」と答えると、「フォローアップ」の質問にテキストエリアが表示されます。「はい」が選択され、テキストエリアが表示される場合、テキストエリアは必須フィールド (class="required") である必要があります。「いいえ」が選択され、テキストエリアが非表示の場合、テキストエリアは必要ありません。

実際の例http://jsfiddle.net/GKATm/を見て、ソース コードを確認するか Firebug を使用すると、非表示のテキスト領域が必要に応じて設定されます。

<span class="details" style="display: none;">
     <textarea id="followup_1_details" maxlength="1000" class="required"></textarea>
</span>

私が間違っていることについてのアイデア。フォームが空白で読み込まれると、すべてが機能します。しかし、私のアプリケーションでは、ユーザーが保存した回答に戻ることができます。これを行うと、必須フィールドに回答がないため、検証プラグインが無効としてフラグを立てます。

助けてください！

HTML:

<div>    
    <label>Question #1</label>
    <span class="options">
        No  <input type="radio" class="toggle_group required" value="0" id="restrictions_no" name="restrictions">
        Yes <input type="radio" class="toggle_group required" value="1" id="restrictions_yes" name="restrictions" checked="checked">
    </span>
</div>

<div class="details_group">
    <div>
        <label>Follow Up #1</label>
        <span>
            No  <input type="radio" class="toggle" value="0" id="followup_1_no" name="followup_1" checked="checked">
            Yes <input type="radio" class="toggle" value="1" id="followup_1_yes" name="followup_1">
        </span>            
        <span class="details">
            <textarea maxlength="1000" id="followup_1_details"></textarea>
        </span>
    </div>

    <div>
        <label>Follow Up #2</label>
        <span>
            No  <input type="radio" class="toggle" value="0" id="followup_2_no" name="followup_2">
            Yes <input type="radio" class="toggle" value="1" id="followup_2_yes" name="followup_2" checked="checked">
        </span>            
        <span class="details">
            <textarea maxlength="1000" id="followup_2_details"></textarea>
        </span>
    </div>
</div>

Javascript:

$('.toggle').on('change', function() {

    var showOrHide = false;

    $(this).siblings('input[type=radio]').andSelf().each(function() {
        if ($(this).val() == 1 && $(this).prop("checked")) showOrHide = true;
    })

    $(this).parent().next('.details').toggle(showOrHide);
    $(this).parent().next('.details').find('textarea').addClass('required');

    if (showOrHide == false) {
        $(this).parent().next('.details').find('textarea').val('');
        $(this).parent().next('.details').find('textarea').removeClass('required');
    }

}).change()


$('.toggle_group').on('change', function() {

    var showOrHide = false;

    $(this).siblings('input[type=radio]').andSelf().each(function() {
        if ($(this).val() == 1 && $(this).prop("checked")) showOrHide = true;
    })

    $(this).parent().parent().next('.details_group').toggle(showOrHide)
    $(this).parent().parent().next('.details_group').find('input:radio').addClass('required');
    $(this).parent().parent().next('.details_group').find('textarea').addClass('required');

    if (showOrHide == false) {
        $(this).parent().parent().next('.details_group').find('input:radio').removeAttr('checked')
        $(this).parent().parent().next('.details_group').find('input:radio').removeClass('required');
        $(this).parent().parent().next('.details_group').find('textarea').val('');
        $(this).parent().parent().next('.details_group').find('textarea').removeClass('required');

    }

}).change()
4

2 に答える 2

1

ちょうどそれを理解しました。各トグルを関数に配置し、グループトグル内でフォローアップトグルを呼び出しました。

例： http： //jsfiddle.net/GKATm/1/

于 2012-04-19T11:33:49.563 に答える
0 
$(function() {
  //Remove requirement for prepopulated textareas
  $("textarea:text[value!='']").removeClass('required');

  //Catch for clicking the radio
  $('input[type=radio]').on('click', function() {
    var $this = $(this);
    if ($this.val() == 1) {
      $this.parent().siblings('.details').children('textarea').addClass('required');
    } else {
      $this.parent().siblings('.details').children('textarea').removeClass('required');
    }
  })
});

フィドル： http： //jsfiddle.net/HS35e/

于 2012-04-19T02:39:33.473 に答える