Question

我的应用程序有一个动态表单，它使用jQuery切换后续问题的显示，并使用jQuery Validation插件提出某些问题。我的问题是，当表单加载时，以前回答的问题，没有显示正确的类。

如果回答“是”，则“跟进”问题会显示文本区域。如果选择“是”，并且显示textarea，则textarea应为必填字段（class =“required”）。如果选择“否”，并且隐藏了textarea，则不需要textarea。

如果您查看一个有效的示例http://jsfiddle.net/GKATm/，并查看源代码或使用Firebug，则会根据需要设置隐藏的textarea：

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

如何使用jQuery Validation插件切换必需的字段类？

2 个答案: