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更改为此...这将帮助你启用字段集中的当前按钮而不是所有这些按钮

＆＃13;

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

＆＃13;

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

1 个答案: