How to disable fields in a stepper of a form using JavaScript

You can register an event listener for the click event on the button. Something along the lines of:

document.getElementById('submit-button-1').addEventListener('click', function(event) {
    // the user clicked on the button, now you can transition the progress bar or do whatever you want.
});

@Borisu Thanks for your help,, am a newbie in JavaScript, I have tracked the code and noticed the CSS code below controls the steppers. It has custom ids to control each stepper. When I add disabled property to the code the steppers dont move.

Without disabled property

    <input checked='checked' id='step-1' name='step' type='radio'>
    <input id='step-2' name='step' type='radio'>
    <input id='step-3' name='step' type='radio'>
    <input id='step-4' name='step' type='radio'>
    <input id='step-5' name='step' type='radio'>

With disabled property

    <input checked='checked' id='step-1' name='step' type='radio' disabled >
    <input id='step-2' name='step' type='radio' disabled>
    <input id='step-3' name='step' type='radio' disabled>
    <input id='step-4' name='step' type='radio' disabled>
    <input id='step-5' name='step' type='radio' disabled>

Now how can I use your custom Js code above to move to stepper 2 when a user triggers a submit event on a button in the first phase of the form.?

~ Regards

@Borisu Hello,, kindly assist me in tackling this question,, am a newbie in Js and really struggling with this stepper

@Patwan, yes you can use the js code above. Just remove the disabled property like so:

document.getElementById('submit-button-1').addEventListener('click', function(event) {
    document.getElementById('step-1').prop('disabled', false);
});

That's it. This is a good chance to learn some JS, but I'd recommend you watch the Vue Series from Jeffrey and try to use it, as it will make it easier in the future.