如何使用jQuery驗證插件切換所需的字段類？

Question

我的應用程序有一個動態表單，它使用jQuery切換後續問題的顯示，並使用jQuery驗證插件提出所需的某些問題。我的問題是，當表單加載時，以前回答的問題，正確的類不顯示。

如果回答「是」，「後續」問題將顯示textarea。如果選擇「是」，並且顯示textarea，則textarea應該是必填字段（class =「required」）。如果選擇「否」，並且textarea被隱藏，則不需要textarea。

如果你看一下工作的例子，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() 

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/