0

I am creating a Mullti-phase form using HTML and CSS which works fine. It has got a stepper at the top whereby I want to disable the 2nd and subsequent fields until a submit event is triggered on a button of the 1st phase. The 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. How can I use vanilla Js or some jquery to make sure only the 1st phase is shown while others are disabled when a user first visits and form and subsequent phases only appear when an event is triggered in the previous phase ?

~ Thanks

Js Fiddle link for CSS and HTML code

http://jsfiddle.net/8c4ktyq5/

Raadio buttons that controls the steppers

   <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'>
Pweb
  • 155
  • 1
  • 4
  • 18
  • In your **JsFiddle** you cannot select/target anything other than the step/progress bar at the stop.. – NewToJS Oct 13 '18 at 06:46
  • @NewToJS Sure,.. I have tried to simplify the huge code as seen in JsFiddle,,, Just wanted an idea of how to change the steppers after an event is trigggered on a phase of the form using JavaScript or Jquery,, am a bit new to Js – Pweb Oct 13 '18 at 10:19

0 Answers0