jQuery多步表单:禁用“下一步”按钮，直到每个部分都填写完输入内容

Question

我有一个多步骤表单，每个<fieldset>中都有不同的输入类型。我有一个' next‘<button>，一旦当前字段集完成，它将触发表单的下一个部分。

当前，next按钮被设置为disabled，直到用户满足该字段集的标准-即:选中的单选/复选框等。

我遇到的问题是，我用来将按钮属性切换为.prop('disabled', false);的jQuery将整个表单中的所有按钮都更改为false。是否可以仅以当前字段集中的<button>为目标？

此外，如果用户返回到某个部分并取消选中所有输入，是否可以禁用next按钮？

下面是包含我当前使用的脚本的前一个答案：Disable button until one radio button is clicked

我有一个Codepen和我在这里工作的原型：https://codepen.io/abbasarezoo/pen/jZgQOV -你可以假设每一个字段集一次显示一次。

代码如下：

HTML：

<form>
    <fieldset>
        <h2>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 disabled>Next</button>
    </fieldset>
    <fieldset>
        <div class="radio-group">
            <h2>Select one answer per row</h2>
            <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-2" />
            <label for="radio-6">Radio 3</label>
            <input type="radio" id="radio-6" name="radio-row-3" />
        </div>
        <div class="radio-group">
            <h3>Row 2</h3>
            <label for="radio-7">Radio 1</label>
            <input type="radio" id="radio-7" name="radio-row-4" />
            <label for="radio-8">Radio 2</label>
            <input type="radio" id="radio-8" name="radio-row-5" />
            <label for="radio-9">Radio 3</label>
            <input type="radio" id="radio-9" name="radio-row-6" />
        </div>
        <button disabled>Next</button>
    </fieldset>
    <fieldset>
        <h2>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-2">Checkbox 3</label>
        <input type="checkbox" id="checkbox-3" name="checkbox" />
        <br />
        <button disabled>Next</button>
    </fieldset>
</form>

JS：

$('fieldset').click(function () {
    if ($('input:checked').length >= 1) { 
        $('button').prop("disabled", false);
    }
    else {
        $('button').prop("disabled", true);
    } 
});

提前感谢您的帮助！

Answer 1

我刚刚把你的js改成了这个..这将帮助您在字段集中启用当前按钮，而不是全部启用

$('fieldset').click(function () {
	if ($('input:checked').length >= 1) { 
		$(this).closest('fieldset').find('button').prop("disabled", false);
	}
	else {
		$('button').prop("disabled", true);
	} 
});

​