jQuery multi-step form: disable 'next' but

Question

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!

Answer 1

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