jQuery多步表单：禁用“下一步”按钮，直到在每个部分填写输入

Question

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

目前，下一个按钮设置为 disabled，直到用户满足该字段集的条件 - 即：选中的收音机/复选框等。

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

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

这是包含我当前使用的脚本的先前答案：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);
	} 
});