Estoy realizando un formulario con para realizarlo paso a paso. Para seguir al siguiente paso, hay checkbox que son obligatorios y otros que no.
Y lo que necesito, es que si todos los checkbox obligatorios del paso 1 (por ejemplo), me habilite el botón para seguir al siguiente paso. Y así sucesivamente con todos los demás pasos.
Aquí el código:
function scroll_to_class(element_class, removed_height) {
var scroll_to = $(element_class).offset().top - removed_height;
if($(window).scrollTop() != scroll_to) {
$('html, body').stop().animate({scrollTop: scroll_to}, 0);
}
}
function bar_progress(progress_line_object, direction) {
var number_of_steps = progress_line_object.data('number-of-steps');
var now_value = progress_line_object.data('now-value');
var new_value = 0;
if(direction == 'right') {
new_value = now_value + ( 100 / number_of_steps );
}
else if(direction == 'left') {
new_value = now_value - ( 100 / number_of_steps );
}
progress_line_object.attr('style', 'width: ' + new_value + '%;').data('now-value', new_value);
}
jQuery(document).ready(function() {
$('button[class="btn btn-next"]').attr('disabled','disabled');
$('.f1 fieldset:first').fadeIn('slow');
$('.f1 input[type="text"], .f1 input[type="password"], .f1 input[type="number"], .f1 input[type="email"]').on('focus', function() {
$(this).removeClass('input-error');
});
$('.f1 .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
var current_active_step = $(this).parents('.f1').find('.f1-step.active');
var progress_line = $(this).parents('.f1').find('.f1-progress-line');
if( next_step ) {
parent_fieldset.fadeOut(400, function() {
current_active_step.removeClass('active').addClass('activated').next().addClass('active');
bar_progress(progress_line, 'right');
$(this).next().fadeIn();
scroll_to_class( $('.f1'), 20 );
});
}
});
$('.f1 .btn-previous').on('click', function() {
var current_active_step = $(this).parents('.f1').find('.f1-step.active');
var progress_line = $(this).parents('.f1').find('.f1-progress-line');
$(this).parents('fieldset').fadeOut(400, function() {
current_active_step.removeClass('active').prev().removeClass('activated').addClass('active');
bar_progress(progress_line, 'left');
$(this).prev().fadeIn();
scroll_to_class( $('.f1'), 20 );
});
});
$(document).on("click", "#trl_2", function(e){
var suge=$("#clasificar_trl").serialize();
$.ajax({
method:"POST",
url:"sugerencias.php",
data:suge,
success: function(data){
$("#transicion_2-3").html(data);
}
});
});
$(document).on("click", "#trl_3", function(e){
var suge=$("#clasificar_trl").serialize();
$.ajax({
method:"POST",
url:"sugerencias.php",
data:suge,
success: function(data){
$("#transicion_3-4").html(data);
}
});
});
$(document).on("change", "#clasificar_trl", function(e){
var arr = $('[class="obligatorios"]:checked').map(function(){
return this.value;
}).get();
});
});
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
select {
height: 44px;
margin: 0;
padding: 0 20px;
vertical-align: middle;
background: #fff;
border: 1px solid #ddd;
font-family: 'Zurich BT';
font-size: 16px;
font-weight: 300;
line-height: 44px;
color: #888;
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
select:focus {
outline: 0;
background: #fff;
border: 1px solid #ccc;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}
input[type="text"]:-moz-placeholder, input[type="password"]:-moz-placeholder,
input[type="number"]:-moz-placeholder, input[type="email"]:-moz-placeholder, select:-moz-placeholder, input[type="number"].form-control:-moz-placeholder { color: #888; }
input[type="text"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder,
textarea:-ms-input-placeholder, textarea.form-control:-ms-input-placeholder { color: #888; }
input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder, textarea.form-control::-webkit-input-placeholder { color: #888; }
label { font-weight: 300; }
button.btn, button.sugerencias {
min-width: 105px;
height: 40px;
margin: 0;
padding: 0 20px;
vertical-align: middle;
border: 0;
font-family: 'Zurich BT';
font-size: 16px;
font-weight: 300;
line-height: 40px;
color: #fff;
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
text-shadow: none;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
button.btn:hover { opacity: 0.6; color: #fff; }
button.btn:active { outline: 0; opacity: 0.6; color: #fff; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
button.btn:focus,
button.btn:active:focus,
button.btn.active:focus { outline: 0; opacity: 0.6; color: #fff; }
button.btn.btn-next,
button.btn.btn-next:focus,
button.btn.btn-next:active:focus, button.btn.btn-next.active:focus { background: #f35b3f; }
button.btn.btn-submit,
button.btn.btn-submit:focus,
button.btn.btn-submit:active:focus, button.btn.btn-submit.active:focus { background: #f35b3f; }
button.btn.btn-previous,
button.btn.btn-previous:focus,
button.btn.btn-previous:active:focus, button.btn.btn-previous.active:focus { background: #bbb; }
body {
font-family: 'Zurich BT';
font-size: 16px;
font-weight: 300;
line-height: 30px;
text-align: center;
margin:auto;
padding:0;
}
strong { font-weight: 500; }
a, a:hover, a:focus {
color: #f35b3f;
text-decoration: none;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
h1, h2 {
margin-top: 10px;
font-size: 38px;
font-weight: 100;
color: #555;
line-height: 50px;
}
h3 {
font-size: 22px;
font-weight: 300;
color: #555;
line-height: 30px;
}
h4 {
font-size: 18px;
font-weight: 300;
color: #555;
line-height: 26px;
}
img { max-width: 100%; }
::-moz-selection { background: #f35b3f; color: #fff; text-shadow: none; }
::selection { background: #f35b3f; color: #fff; text-shadow: none; }
/***** Top content *****/
.top-content { padding: 40px 0 170px 0; }
.top-content .text { color: #fff; }
.top-content .text h1 { color: #fff; }
.top-content .description { margin: 20px 0 10px 0; }
.top-content .description p { opacity: 0.8; }
.top-content .description a { color: #fff; }
.top-content .description a:hover,
.top-content .description a:focus { border-bottom: 1px dotted #fff; }
.form-box { padding-top: 40px; }
.f1 {
padding: 25px; background: #fff;
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
}
.f1 h3 { margin-top: 0; margin-bottom: 5px; text-transform: uppercase; }
.f1-steps { overflow: hidden; position: relative; }
.f1-progress { position: absolute; top: 24px; left: 0; width: 100%; height: 1px; background: #fc7323; }
.f1-progress-line { position: absolute; top: 0; left: 0; height: 1px; background: #59B548; }
.f1-step { position: relative; float: left; width: 33.333333%; padding: 0 5px; }
.f1-step-icon {
display: inline-block; width: 20px; height: 20px; margin-top: 4px; background: #fc7323;
font-size: 16px; color: #fff; line-height: 20px;
-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
.f1-step.activated .f1-step-icon {
background: #59B548; border: 1px solid #59B548; color: #fc7323; line-height: 30px;
}
.f1-step.active .f1-step-icon {
width: 30px; height: 30px; margin-top: 0; background: #238276; font-size: 22px; line-height: 30px;
}
.f1-step p { color: #fc7323; }
.f1-step.activated p { color: #59B548; }
.f1-step.active p { color: #238276; }
.f1 fieldset { display: none; text-align: justify; }
.f1-buttons { text-align: right; }
.f1 .input-error { border-color: #f35b3f; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset id="trl_1_campo">
<center>
<h3 style="border-bottom:2px solid #fc7323;">TRL 1: Investigación Básica</h3>
<h4 style="border-bottom:2px solid #fc7323;">Principios básicos observados y reportados. Artículos científicos publicados sobre los principios de la nueva tecnología.</h4>
</center>
<div class="form-group">
1. ¿Finalizó con la investigación básica de su idea?
<input type="checkbox" name="checkbox1-1" name="checkbox1-1" class="obligatorios">
</div>
<div class="form-group">
2. ¿Identificó principios de investigación básica que pudieran trasladarse en principios nuevos que pueden ser utilizados en nuevas tecnologías?
<input type="checkbox" name="checkbox1-2" id="checkbox1-2" class="obligatorios">
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-next" id="seguir" style="background-color:#59B548">Siguiente</button>
</div>
</fieldset>
<fieldset id="trl_2_campo">
<center>
<h3 style="border-bottom:2px solid #fc7323;">TRL 2: Investigación de Laboratorio. Concepto tecnológico y/o aplicación tecnológica formulada. Investigación aplicada</h3>
<h4 style="border-bottom:2px solid #fc7323;">Publicaciones o referencias que subrayan las aplicaciones de la nueva tecnología. Inicio de la invención.</h4>
</center>
<div class="form-group">
1. ¿Realizó un análisis de los artículos científicos, modelos o teorías científicas que respaldan la aplicación de la idea en algún área tecnológica?
<input type="checkbox" name="checkbox2-1" class="obligatorios">
</div>
<div class="form-group">
2. ¿Realizó estudios de búsqueda y análisis de patentes a nivel nacional e internacional, y los resultados indicaron que no existe un desarrollo igual a su idea? (benck mark tecnológico)
<input type="checkbox" name="checkbox2-2" class="obligatorios">
</div>
<div class="form-group">
3. ¿Ha explorado principios básicos de manufacturabilidad?
<input type="checkbox" name="checkbox2-3" class="obligatorios">
</div>
<div class="form-group">
4. ¿Ha explorado posibles usuarios de la invención?
<input type="checkbox" name="checkbox2-4" class="obligatorios">
</div>
<div class="form-group">
5. ¿Cuenta con un grupo de investigación que pueda facilitar la evaluación inicial de factibilidad de la tecnología?
<input type="checkbox" name="checkbox2-5">
</div>
<div class="form-group">
6. ¿Tiene contemplado un plan de licenciamiento de tecnología a terceros?
<input type="checkbox" name="checkbox2-6">
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-previous">Anterior</button>
<button type="button" class="btn btn-next" id="trl_2" style="background-color:#59B548">Siguiente</button>
</div>
</fieldset>
<fieldset id="trl_3_campo">
<center>
<h3 style="border-bottom:2px solid #fc7323;">TRL 3: Investigación de Laboratorio. Prueba experimental de concepto</h3>
<h4 style="border-bottom:2px solid #fc7323;">Primera evaluacián de la factibilidad de un concepto y su tecnología.</h4>
</center>
<div class="form-group">
1. ¿Tiene identificados los componentes de su invención tecnológica?
<input type="checkbox" name="checkbox3-1" class="obligatorios">
<div class="fondo"></div>
</div>
<div class="form-group">
2. ¿Ha llevado a cabo algún proceso de validación de mercado sobre su invención? (I+D en laboratorio más primeras pláticas con posibles usuarios)
<input type="checkbox" name="checkbox3-2" class="obligatorios">
<div class="fondo"></div>
</div>
<div class="form-group">
3. ¿Realizó/actualizó estudios de búsqueda y análisis de patentes a nivel nacional e internacional, y los resultados indicaron que no existe un desarrollo igual a su idea? (benchmark tecnológico)
<input type="checkbox" name="checkbox3-3" class="obligatorios">
<div class="fondo"></div>
</div>
<div class="form-group">
4. ¿Los resultados de la búsqueda y análisis de patentes indicaron que la invención puede ser protegida mediante algún mecanismo de protección?
<input type="checkbox" name="checkbox3-4">
<div class="fondo"></div>
</div>
<div class="form-group">
5. ¿Ha realizado un estudio sobre los aspectos regulatorios (comités de ética, normas, ISO´s, y certificaciones) que son requeridos para su invención tecnológica?
<input type="checkbox" name="checkbox3-5" class="obligatorios">
<div class="fondo"></div>
</div>
<div class="form-group">
6. ¿Tiene contemplado un plan de licenciamiento de tecnología a terceros?
<input type="checkbox" name="checkbox3-6">
<div class="fondo"></div>
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-previous">Anterior</button>
<button type="button" class="btn btn-next" id="trl_3" style="background-color:#59B548">Siguiente</button>
</div>
</fieldset>
Los que sin class="obligatorios" deben ser seleccionados para que el botón se habilite, pero no sé cómo hacerlo.
Por el momento, sólo requiero saber cómo puedo negar el paso siguiente si no han hecho lo requerido. Agradezco mucho su ayuda.