jQuery多步表单:当字段未选中时禁用next按钮

Question

我有一个多步表单，其中有一个“下一步”和“后退”按钮，在每个步骤的表单。一旦满足每个部分的条件，我将使用jQuery启用"next“按钮。例如:至少选中一个复选框或选择单选按钮。

我遇到了一个问题，在完成多个部分之后，我返回到前面的部分，取消选中所有复选框，"next“按钮将保持启用状态。

这里有一个我正在使用的粗略版本的代码-注意，当您开始检查/取消检查时，所有部分都是可见的，以显示按钮是如何保持启用的：https://codepen.io/abbasarezoo/pen/jZgQOV

我现在的代码是：

<form>
    <fieldset class="panels">
        <h2>1: Select multiple answers</h2>
        <label for="checkbox-1">Checkbox 1</label>
        <input type="checkbox" id="checkbox-1" name="checkbox" />
        <label for="checkbox-2">Checkbox 2</label>
        <input type="checkbox" id="checkbox-2" name="checkbox" />
        <label for="checkbox-3">Checkbox 3</label>
        <input type="checkbox" id="checkbox-3" name="checkbox" />
        <br />
        <button type="button" class="next-q" disabled>Next</button>
    </fieldset>
    <fieldset class="panels">
        <h2>2: Select multiple answers</h2>
        <label for="checkbox-4">Checkbox 1</label>
        <input type="checkbox" id="checkbox-4" name="checkbox" />
        <label for="checkbox-5">Checkbox 2</label>
        <input type="checkbox" id="checkbox-5" name="checkbox" />
        <label for="checkbox-6">Checkbox 3</label>
        <input type="checkbox" id="checkbox-6" name="checkbox" />
        <br />
        <button type="button" class="next-q" disabled>Next</button>
    </fieldset>
    <fieldset class="panels">
        <h2>3: Select one answer</h2>
        <label for="radio-1">Radio 1</label>
        <input type="radio" id="radio-1" name="radio" />
        <label for="radio-2">Radio 2</label>
        <input type="radio" id="radio-2" name="radio" />
        <label for="radio-2">Radio 3</label>
        <input type="radio" id="radio-3" name="radio" />
        <br />
        <button type="button" class="next-q" disabled>Next</button>
        <button type="button" class="previous-q">Previous</button>
    </fieldset>
    <fieldset class="rows">
        <h2>4: Select one answer per row</h2>
        <div class="radio-row">
            <h3>Row 1</h3>
            <label for="radio-4">Radio 1</label>
            <input type="radio" id="radio-4" name="radio-row-1" />
            <label for="radio-5">Radio 2</label>
            <input type="radio" id="radio-5" name="radio-row-1" />
            <label for="radio-6">Radio 3</label>
            <input type="radio" id="radio-6" name="radio-row-1" />
        </div>
        <div class="radio-row">
            <h3>Row 2</h3>
            <label for="radio-7">Radio 1</label>
            <input type="radio" id="radio-7" name="radio-row-2" />
            <label for="radio-8">Radio 2</label>
            <input type="radio" id="radio-8" name="radio-row-2" />
            <label for="radio-9">Radio 3</label>
            <input type="radio" id="radio-9" name="radio-row-2" />
        </div>
        <button type="button" class="next-q" disabled>Next</button>
        <button type="button" class="previous-q">Previous</button>
    </fieldset>
</form>

联署材料：

var $panelsInput = $('.panels input'),
        $rowsInput = $('.rows input');

$panelsInput.click(function () {
  if ($('.panels input:checked').length >= 1) {
    $(this).closest('.panels').find('.next-q').prop('disabled', false);
  }
  else {
    $(this).closest('.panels').find('.next-q').prop('disabled', true);
  }
});

$rowsInput.click(function () {
    var radioLength = $('.radio-row').length;
    if ($('.rows input:checked').length == radioLength) {
        $('.rows .next-q').prop('disabled', false);
    }
    else {
        $('.rows .next-q').prop('disabled', true);
    }
});

有什么办法让这件事成功吗？

Answer 1

当您选择输入以查看是否选中时，您将选择所有输入

if ($('.panels input:checked').length >= 1) {

您只需要从用户单击的面板中选择输入。

if ($(this).closest('.panels').find('input:checked').length >= 1) {

https://codepen.io/spacedog4/pen/YaWqdo?editors=1010

Answer 2

请参阅下面$panelsInput.click(function (){});中的注释，您需要获取当前面板的checked计数(用户单击)，而不是全部。

所以你代码中的比较：$('.panels input:checked').length >= 1

需要更改为：$(this).parent().find('input:checked').length >= 1

​

var $panelsInput = $('.panels input'),
    $rowsInput = $('.rows input');

$panelsInput.click(function () {
  //get current input, find out its parent, then get the count of checked
  if ($(this).parent().find('input:checked').length >= 1) {
    $(this).closest('.panels').find('.next-q').prop('disabled', false);
  }
  else {
    $(this).closest('.panels').find('.next-q').prop('disabled', true);
  }
});

$rowsInput.click(function () {
    var radioLength = $('.radio-row').length;
    if ($('.rows input:checked').length == radioLength) {
        $('.rows .next-q').prop('disabled', false);
    }
    else {
        $('.rows .next-q').prop('disabled', true);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <fieldset class="panels">
    <h2>1: Select multiple answers</h2>
    <label for="checkbox-1">Checkbox 1</label>
    <input type="checkbox" id="checkbox-1" name="checkbox" />
    <label for="checkbox-2">Checkbox 2</label>
    <input type="checkbox" id="checkbox-2" name="checkbox" />
    <label for="checkbox-3">Checkbox 3</label>
    <input type="checkbox" id="checkbox-3" name="checkbox" />
    <br />
    <button type="button" class="next-q" disabled>Next</button>
  </fieldset>
  <fieldset class="panels">
    <h2>2: Select multiple answers</h2>
    <label for="checkbox-4">Checkbox 1</label>
    <input type="checkbox" id="checkbox-4" name="checkbox" />
    <label for="checkbox-5">Checkbox 2</label>
    <input type="checkbox" id="checkbox-5" name="checkbox" />
    <label for="checkbox-6">Checkbox 3</label>
    <input type="checkbox" id="checkbox-6" name="checkbox" />
    <br />
    <button type="button" class="next-q" disabled>Next</button>
  </fieldset>
  <fieldset class="panels">
    <h2>3: Select one answer</h2>
    <label for="radio-1">Radio 1</label>
    <input type="radio" id="radio-1" name="radio" />
    <label for="radio-2">Radio 2</label>
    <input type="radio" id="radio-2" name="radio" />
    <label for="radio-2">Radio 3</label>
    <input type="radio" id="radio-3" name="radio" />
    <br />
    <button type="button" class="next-q" disabled>Next</button>
    <button type="button" class="previous-q">Previous</button>
  </fieldset>
  <fieldset class="rows">
    <h2>4: Select one answer per row</h2>
    <div class="radio-row">
      <h3>Row 1</h3>
      <label for="radio-4">Radio 1</label>
      <input type="radio" id="radio-4" name="radio-row-1" />
      <label for="radio-5">Radio 2</label>
      <input type="radio" id="radio-5" name="radio-row-1" />
      <label for="radio-6">Radio 3</label>
      <input type="radio" id="radio-6" name="radio-row-1" />
    </div>
    <div class="radio-row">
      <h3>Row 2</h3>
      <label for="radio-7">Radio 1</label>
      <input type="radio" id="radio-7" name="radio-row-2" />
      <label for="radio-8">Radio 2</label>
      <input type="radio" id="radio-8" name="radio-row-2" />
      <label for="radio-9">Radio 3</label>
      <input type="radio" id="radio-9" name="radio-row-2" />
    </div>
    <button type="button" class="next-q" disabled>Next</button>
    <button type="button" class="previous-q">Previous</button>
  </fieldset>
</form>

​

Answer 3

我认为在更灵活的事件委托级别上使用form处理交互很有趣：

• 内存中只加载一个处理程序。(顺便说一句，只有一个作用域负责prev/next行为背后的逻辑)。
• 您可以动态地向表单中添加面板(具有相同的标记结构)，并且按钮将立即工作，而不需要另一个侦听器注册步骤。

​

var $panelsInput = $('.panels input')
    , $rowsInput = $('.rows input')
    ;

$('form').on('click', function (e) {
   let $t = $(this)
       , $target = $(e.target)
       , $fieldset = $target.closest('fieldset')
       , $rows = $fieldset.find('.radio-row')
       ;
       
   // When a button is clicked
   if ($target.is('button')) {
     // Next button
     if ($target.is('.next-q')) {
         $fieldset.addClass('hide').next().addClass('show');
     // Prev button
     } else {
        // Untick boxes
        $fieldset.find('input').prop('checked', false).end()
        // Disable appropriate button
        .find('.next-q').prop('disabled', true).end()
        .prev().removeClass('hide').nextAll().removeClass('show');
        
     }
     
   // When a checkbox is clicked
   } else if ($target.is('input')) {
        let $containers = ($rows.length ? $rows : $fieldset)
            , containersHavingAtickedBox = $containers.filter(function() {
              return !!$(this).find('input:checked').length
            })
            , shouldEnable = $containers.length === containersHavingAtickedBox.length
            ;
        $fieldset.find('.next-q').prop('disabled', !shouldEnable);
   }
});

fieldset ~ fieldset, .hide{display:none}
fieldset.show:not(.hide){display: block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <fieldset class="panels">
        <h2>1: Select multiple answers</h2>
        <label for="checkbox-1">Checkbox 1</label>
        <input type="checkbox" id="checkbox-1" name="checkbox" />
        <label for="checkbox-2">Checkbox 2</label>
        <input type="checkbox" id="checkbox-2" name="checkbox" />
        <label for="checkbox-3">Checkbox 3</label>
        <input type="checkbox" id="checkbox-3" name="checkbox" />
        <br />
        <button type="button" class="next-q" disabled>Next</button>
    </fieldset>
    <fieldset class="panels">
        <h2>2: Select multiple answers</h2>
        <label for="checkbox-4">Checkbox 1</label>
        <input type="checkbox" id="checkbox-4" name="checkbox" />
        <label for="checkbox-5">Checkbox 2</label>
        <input type="checkbox" id="checkbox-5" name="checkbox" />
        <label for="checkbox-6">Checkbox 3</label>
        <input type="checkbox" id="checkbox-6" name="checkbox" />
        <br />
        <button type="button" class="next-q" disabled>Next</button>
    </fieldset>
    <fieldset class="panels">
        <h2>3: Select one answer</h2>
        <label for="radio-1">Radio 1</label>
        <input type="radio" id="radio-1" name="radio" />
        <label for="radio-2">Radio 2</label>
        <input type="radio" id="radio-2" name="radio" />
        <label for="radio-2">Radio 3</label>
        <input type="radio" id="radio-3" name="radio" />
        <br />
        <button type="button" class="next-q" disabled>Next</button>
        <button type="button" class="previous-q">Previous</button>
    </fieldset>
    <fieldset class="rows">
        <h2>4: Select one answer per row</h2>
        <div class="radio-row">
            <h3>Row 1</h3>
            <label for="radio-4">Radio 1</label>
            <input type="radio" id="radio-4" name="radio-row-1" />
            <label for="radio-5">Radio 2</label>
            <input type="radio" id="radio-5" name="radio-row-1" />
            <label for="radio-6">Radio 3</label>
            <input type="radio" id="radio-6" name="radio-row-1" />
        </div>
        <div class="radio-row">
            <h3>Row 2</h3>
            <label for="radio-7">Radio 1</label>
            <input type="radio" id="radio-7" name="radio-row-2" />
            <label for="radio-8">Radio 2</label>
            <input type="radio" id="radio-8" name="radio-row-2" />
            <label for="radio-9">Radio 3</label>
            <input type="radio" id="radio-9" name="radio-row-2" />
        </div>
        <button type="button" class="next-q" disabled>Next</button>
        <button type="button" class="previous-q">Previous</button>
    </fieldset>
</form>

​