Tengo un formulario compuesto de tres columnas, lo que quiero es que a medida que se empieza a rellenar los datos desde la primera columna las otras no sean editables hasta que se le de el botón siguiente hasta el ultimo boton de enviar. Mi código html es:
<div class="container-fluid">
<form id="form" data-parsley-validate novalidate>
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
<div class="card">
<h5 class="card-header title-estado">Datos Específicos</h5>
<div class="bd-example">
<div id="name" class="form-group row">
<label for="inputText0" class="col-5 col-lg-5 col-form-label text-left label-style">Nombre:</label>
<div class="col-7 col-lg-7">
<input id="inputText0" type="text" required="" class="form-control" placeholder="Numbers">
</div>
</div>
<div id="gender" class="form-group row">
<label class="col-5 col-lg-5 col-form-label text-left label-style">Género:</label>
<div class="col-7 col-lg-7">
<div>
<label class="custom-control custom-radio">
<input id="radio1" type="radio" required="" name="button" class="custom-control-input">
<span class="custom-control-label">Femenino</span>
</label>
<label class="custom-control custom-radio">
<input id="radio2" type="radio" required="" name="button" class="custom-control-input">
<span class="custom-control-label">Masculino</span>
</label>
</div>
<div class="card-body border-top">
<button class="btn btn-primary btn-block btn-style" type="submit">Siguiente</button>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
<div class="card">
<h5 class="card-header title-estado">Notas</h5>
<div class="bd-example">
<div class="form-group row">
<label for="inputText1" class="col-5 col-lg-5 col-form-label text-left label-style">Matemática:</label>
<div class="col-7 col-lg-7">
<input id="inputText1" type="number" required="" class="form-control" placeholder="Numbers" min="0" max="20">
</div>
</div>
<div class="form-group row">
<label for="inputText2" class="col-5 col-lg-5 col-form-label text-left label-style">Geografía:</label>
<div class="col-7 col-lg-7">
<input id="inputText2" type="number" required="" class="form-control" placeholder="Numbers" min="0" max="20">
</div>
</div>
<div class="form-group row">
<label for="inputText3" class="col-5 col-lg-5 col-form-label text-left label-style">Historia:</label>
<div class="col-7 col-lg-7">
<input id="inputText3" type="number" required="" class="form-control" placeholder="Numbers" min="0" max="20">
</div>
</div>
<div class="card-body border-top">
<button class="btn btn-primary btn-block btn-style" type="submit">Siguiente</button>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
<div class="card">
<h5 class="card-header title-estado">Otras Notas</h5>
<div class="bd-example">
<div class="form-group row">
<label for="inputText4" class="col-5 col-lg-5 col-form-label text-left label-style">Economía:</label>
<div class="col-7 col-lg-7">
<input id="inputText4" type="number" required="" class="form-control" placeholder="Numbers" min="0" max="20">
</div>
</div>
<div class="form-group row">
<label for="inputText5" class="col-5 col-lg-5 col-form-label text-left label-style">Psicología:</label>
<div class="col-7 col-lg-7">
<input id="inputText5" type="number" required="" class="form-control" placeholder="Numbers" min="0" max="20">
</div>
</div>
<div class="form-group row">
<label for="inputText6" class="col-5 col-lg-5 col-form-label text-left label-style">Filosfía:</label>
<div class="col-7 col-lg-7">
<input id="inputText6" type="number" required="" class="form-control" placeholder="Numbers" min="0" max="20">
</div>
</div>
<div class="card-body border-top">
<button class="btn btn-primary btn-block btn-style" type="submit">Enviar</button>
</div>
</div>
</div>
</div>
</form>
</div>
Cuando se este llenando la primera columna del formulario los input de las otras dos columnas deben de estar en gris y no editables, para luego, una vez que se haga click en siguiente (de la primera columna) se habilite la siguiente columna para editarla, pero la tercera columna siga desabilitada, finalmente cuando se haya rellenado la segunda columna se haga click en siguiente se habilite la última y luego se envíe el formulario, no se si en javascript exista algo relacionado a desabilitar. No tengo idea de que como hacer el código en javascript para esta función si alguien pudiera ayudarme.
Gracias de antemano