jQuery多步骤表单：禁用“下一步”按钮，直到每个部分填入输入 [英] jQuery multi-step form: disable 'next' button until input is filled in each section

问题描述

我在每个< fieldset> 中有不同的输入类型。我有一个'下一个'<按钮> ，它会在当前字段集完成后触发表单的下一部分。

目前下一个按钮被设置为禁用，直到用户符合该字段集的标准 - 即：检查无线电/复选框等。

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

另外，是否可以禁用下一个按钮，如果用户回到一个部分，并取消所有输入？

这是包含我目前使用的脚本的以前的答案：禁用按钮，直到一个单选按钮被点击

我有一个Codepen，里面有我在这里工作的原型： https： //codepen.io/abbasarezoo/pen/jZgQOV - 您可以假设一次每个fieldset都会显示一次。

以下代码：

p>

HTML：

 < form> 
< fieldset> 
< h2>选择一个答案< / h2> 
< label for =radio-1> Radio 1< / label> 
< input type =radioid =radio-1name =radio/> 
< label for =radio-2> Radio 2< / label> 
< input type =radioid =radio-2name =radio/> 
< label for =radio-2> Radio 3< / label> 
< input type =radioid =radio-3name =radio/> 
< br /> 
<按钮无效>下一步< /按钮> 
< / fieldset> 
< fieldset> 
< div class =radio-group> 
< h2>每行选择一个答案< / h2> 
< h3>第1行< / h3> 
< label for =radio-4> Radio 1< / label> 
< input type =radioid =radio-4name =radio-row-1/> 
< label for =radio-5> Radio 2< / label> 
< input type =radioid =radio-5name =radio-row-2/> 
< label for =radio-6> Radio 3< / label> 
< input type =radioid =radio-6name =radio-row-3/> 
< / div> 
< div class =radio-group> 
< h3>第2行< / h3> 
< label for =radio-7> Radio 1< / label> 
< input type =radioid =radio-7name =radio-row-4/> 
< label for =radio-8> Radio 2< / label> 
< input type =radioid =radio-8name =radio-row-5/> 
< label for =radio-9> Radio 3< / label> 
< input type =radioid =radio-9name =radio-row-6/> 
< / div> 
<按钮无效>下一步< /按钮> 
< / fieldset> 
< fieldset> 
< h2>选择多个答案< / h2> 
< label for =checkbox-1>复选框1< / label> 
< input type =checkboxid =checkbox-1name =checkbox/> 
< label for =checkbox-2>复选框2< / label> 
< input type =checkboxid =checkbox-2name =checkbox/> 
< label for =checkbox-2>复选框3< / label> 
< input type =checkboxid =checkbox-3name =checkbox/> 
< br /> 
<按钮无效>下一步< /按钮> 
< / fieldset> 
< / form> 
  

JS：

 < （$（'input：checked'）。length> = 1）{
 $（'button'）code> $（'fieldset'）。click .prop（disabled，false）; 
} 
 else {
 $（'button'）。prop（disabled，true）; 
} 
 }）; 
  

预先感谢您的帮助！

解决方案

我只是改变你的js到这..这将帮助你在fieldset中启用当前按钮不是所有的

I have a multi-step form with different input types inside each <fieldset>. I have a 'next' <button> which will trigger the next section of the form once the current fieldset has been completed.

Currently the next button is set to disabled until the user has met the criteria for that fieldset - ie: checked radios/checkboxes etc.

The issue I'm having is the jQuery I'm using to switch the button attribute to .prop('disabled', false); changes all of the buttons in the entire form to false. Is it possible to target the <button> within the current fieldset only?

Additionally, is it possible to disable the next button if a user goes back to a section and unchecks all inputs?

Here's a previous answer containing the script i'm currently using: Disable button until one radio button is clicked

I have a Codepen with a prototype of what I'm working on here: https://codepen.io/abbasarezoo/pen/jZgQOV - you can assume once live each one fieldset will show at a time.

Code below:

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);
    } 
});

Thanks in advance for any help!

解决方案

i have just change your js into this .. this will help you to enable current button in the fieldset not all of them

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

这篇关于jQuery多步骤表单：禁用“下一步”按钮，直到每个部分填入输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！