jQuery検証プラグインで必須のフィールドクラスを切り替える方法は？

Question

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

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

あなたは、作業例を見てhttp://jsfiddle.net/GKATm/、およびソースコードをレビューやFirebugのを使用する場合は必要に応じて、隠しテキストエリアが設定されている：

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

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

助けてください！

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

Answer 1

はちょうどそれを考え出しました。私は各トグルを機能の中に置き、グループトグル内でフォローアップトグルを呼び出しました。

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

Answer 2

$(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/