1

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

如果回答“是”，“跟进”问题会显示一个文本区域。如果选择“yes”并显示 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()
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 回答