1

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&oacute;n B&aacute;sica</h3>
							<h4 style="border-bottom:2px solid #fc7323;">Principios b&aacute;sicos observados y reportados. Art&iacute;culos cient&iacute;ficos publicados sobre los principios de la nueva tecnolog&iacute;a.</h4>
						</center>
						<div class="form-group">
							1. &iquest;Finaliz&oacute; con la investigaci&oacute;n b&aacute;sica de su idea?
							<input type="checkbox" name="checkbox1-1" name="checkbox1-1" class="obligatorios">
						</div>
						<div class="form-group">
							2. &iquest;Identific&oacute; principios de investigaci&oacute;n b&aacute;sica que pudieran trasladarse en principios nuevos que pueden ser utilizados en nuevas tecnolog&iacute;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&oacute;n de Laboratorio. Concepto tecnol&oacute;gico y/o aplicaci&oacute;n tecnol&oacute;gica formulada. Investigaci&oacute;n aplicada</h3>
							<h4 style="border-bottom:2px solid #fc7323;">Publicaciones o referencias que subrayan las aplicaciones de la nueva tecnolog&iacute;a. Inicio de la invenci&oacute;n.</h4>
						</center>
						<div class="form-group">
							1. &iquest;Realiz&oacute; un an&aacute;lisis de los art&iacute;culos cient&iacute;ficos, modelos o teor&iacute;as cient&iacute;ficas que respaldan la aplicaci&oacute;n de la idea en alg&uacute;n &aacute;rea tecnol&oacute;gica?
							<input type="checkbox" name="checkbox2-1"  class="obligatorios">
						</div>
						<div class="form-group">
							2. &iquest;Realiz&oacute; estudios de b&uacute;squeda y an&aacute;lisis de patentes a nivel nacional e internacional, y los resultados indicaron que no existe un desarrollo igual a su idea? (benck mark tecnol&oacute;gico)
							<input type="checkbox" name="checkbox2-2"  class="obligatorios">
						</div>
						<div class="form-group">
							3. &iquest;Ha explorado principios b&aacute;sicos de manufacturabilidad?
							<input type="checkbox" name="checkbox2-3"  class="obligatorios">
						</div>
						<div class="form-group">
							4. &iquest;Ha explorado posibles usuarios de la invenci&oacute;n?
							<input type="checkbox" name="checkbox2-4"  class="obligatorios">
						</div>
						<div class="form-group">
							5. &iquest;Cuenta con un grupo de investigaci&oacute;n que pueda facilitar la evaluaci&oacute;n inicial de factibilidad de la tecnolog&iacute;a?
							<input type="checkbox" name="checkbox2-5">
						</div>
						<div class="form-group">
							6. &iquest;Tiene contemplado un plan de licenciamiento de tecnolog&iacute;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&oacute;n de Laboratorio. Prueba experimental de concepto</h3>
							<h4 style="border-bottom:2px solid #fc7323;">Primera evaluaci&aacute;n de la factibilidad de un concepto y su tecnolog&iacute;a.</h4>
						</center>
						<div class="form-group">
							1. &iquest;Tiene identificados los componentes de su invenci&oacute;n tecnol&oacute;gica?
							<input type="checkbox" name="checkbox3-1" class="obligatorios">
							<div class="fondo"></div>
						</div>
						<div class="form-group">
							2. &iquest;Ha llevado a cabo alg&uacute;n proceso de validaci&oacute;n de mercado sobre su invenci&oacute;n? (I+D en laboratorio m&aacute;s primeras pl&aacute;ticas con posibles usuarios)
							<input type="checkbox" name="checkbox3-2" class="obligatorios">
							<div class="fondo"></div>
						</div>
						<div class="form-group">
							3. &iquest;Realiz&oacute;/actualiz&oacute; estudios de b&uacute;squeda y an&aacute;lisis de patentes a nivel nacional e internacional, y los resultados indicaron que no existe un desarrollo igual a su idea? (benchmark tecnol&oacute;gico)
							<input type="checkbox" name="checkbox3-3" class="obligatorios">
							<div class="fondo"></div>
						</div>
						<div class="form-group">
							4. &iquest;Los resultados de la b&uacute;squeda y an&aacute;lisis de patentes indicaron que la invenci&oacute;n puede ser protegida mediante alg&uacute;n mecanismo de protecci&oacute;n?
							<input type="checkbox" name="checkbox3-4">
							<div class="fondo"></div>
						</div>
						<div class="form-group">
							5. &iquest;Ha realizado un estudio sobre los aspectos regulatorios (comit&eacute;s de &eacute;tica, normas, ISO´s, y certificaciones) que son requeridos para su invenci&oacute;n tecnol&oacute;gica?
							<input type="checkbox" name="checkbox3-5" class="obligatorios">
							<div class="fondo"></div>
						</div>
						<div class="form-group">
							6. &iquest;Tiene contemplado un plan de licenciamiento de tecnolog&iacute;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.

1 respuesta 1

0

Necesitas manejar el evento click de la clase obligatorios. Algo asi:

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-buttons .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();
			});
      $(document).on("click", ".obligatorios", function() {
        var fieldset = $(this).parents('fieldset');
        var valid = true;
        fieldset.find(".obligatorios").each(function() {
          if($(this). prop("checked") == false) {
            valid = false;
          }
        });
        if(valid) {
          $(fieldset).find('button[class="btn btn-next"]').removeAttr('disabled');
        } else {
          $(fieldset).find('button[class="btn btn-next"]').attr('disabled', 'disabled');
        }
      });
		});
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&oacute;n B&aacute;sica</h3>
							<h4 style="border-bottom:2px solid #fc7323;">Principios b&aacute;sicos observados y reportados. Art&iacute;culos cient&iacute;ficos publicados sobre los principios de la nueva tecnolog&iacute;a.</h4>
						</center>
						<div class="form-group">
							1. &iquest;Finaliz&oacute; con la investigaci&oacute;n b&aacute;sica de su idea?
							<input type="checkbox" name="checkbox1-1" name="checkbox1-1" class="obligatorios">
						</div>
						<div class="form-group">
							2. &iquest;Identific&oacute; principios de investigaci&oacute;n b&aacute;sica que pudieran trasladarse en principios nuevos que pueden ser utilizados en nuevas tecnolog&iacute;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&oacute;n de Laboratorio. Concepto tecnol&oacute;gico y/o aplicaci&oacute;n tecnol&oacute;gica formulada. Investigaci&oacute;n aplicada</h3>
							<h4 style="border-bottom:2px solid #fc7323;">Publicaciones o referencias que subrayan las aplicaciones de la nueva tecnolog&iacute;a. Inicio de la invenci&oacute;n.</h4>
						</center>
						<div class="form-group">
							1. &iquest;Realiz&oacute; un an&aacute;lisis de los art&iacute;culos cient&iacute;ficos, modelos o teor&iacute;as cient&iacute;ficas que respaldan la aplicaci&oacute;n de la idea en alg&uacute;n &aacute;rea tecnol&oacute;gica?
							<input type="checkbox" name="checkbox2-1"  class="obligatorios">
						</div>
						<div class="form-group">
							2. &iquest;Realiz&oacute; estudios de b&uacute;squeda y an&aacute;lisis de patentes a nivel nacional e internacional, y los resultados indicaron que no existe un desarrollo igual a su idea? (benck mark tecnol&oacute;gico)
							<input type="checkbox" name="checkbox2-2"  class="obligatorios">
						</div>
						<div class="form-group">
							3. &iquest;Ha explorado principios b&aacute;sicos de manufacturabilidad?
							<input type="checkbox" name="checkbox2-3"  class="obligatorios">
						</div>
						<div class="form-group">
							4. &iquest;Ha explorado posibles usuarios de la invenci&oacute;n?
							<input type="checkbox" name="checkbox2-4"  class="obligatorios">
						</div>
						<div class="form-group">
							5. &iquest;Cuenta con un grupo de investigaci&oacute;n que pueda facilitar la evaluaci&oacute;n inicial de factibilidad de la tecnolog&iacute;a?
							<input type="checkbox" name="checkbox2-5">
						</div>
						<div class="form-group">
							6. &iquest;Tiene contemplado un plan de licenciamiento de tecnolog&iacute;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&oacute;n de Laboratorio. Prueba experimental de concepto</h3>
							<h4 style="border-bottom:2px solid #fc7323;">Primera evaluaci&aacute;n de la factibilidad de un concepto y su tecnolog&iacute;a.</h4>
						</center>
						<div class="form-group">
							1. &iquest;Tiene identificados los componentes de su invenci&oacute;n tecnol&oacute;gica?
							<input type="checkbox" name="checkbox3-1" class="obligatorios">
							<div class="fondo"></div>
						</div>
						<div class="form-group">
							2. &iquest;Ha llevado a cabo alg&uacute;n proceso de validaci&oacute;n de mercado sobre su invenci&oacute;n? (I+D en laboratorio m&aacute;s primeras pl&aacute;ticas con posibles usuarios)
							<input type="checkbox" name="checkbox3-2" class="obligatorios">
							<div class="fondo"></div>
						</div>
						<div class="form-group">
							3. &iquest;Realiz&oacute;/actualiz&oacute; estudios de b&uacute;squeda y an&aacute;lisis de patentes a nivel nacional e internacional, y los resultados indicaron que no existe un desarrollo igual a su idea? (benchmark tecnol&oacute;gico)
							<input type="checkbox" name="checkbox3-3" class="obligatorios">
							<div class="fondo"></div>
						</div>
						<div class="form-group">
							4. &iquest;Los resultados de la b&uacute;squeda y an&aacute;lisis de patentes indicaron que la invenci&oacute;n puede ser protegida mediante alg&uacute;n mecanismo de protecci&oacute;n?
							<input type="checkbox" name="checkbox3-4">
							<div class="fondo"></div>
						</div>
						<div class="form-group">
							5. &iquest;Ha realizado un estudio sobre los aspectos regulatorios (comit&eacute;s de &eacute;tica, normas, ISO´s, y certificaciones) que son requeridos para su invenci&oacute;n tecnol&oacute;gica?
							<input type="checkbox" name="checkbox3-5" class="obligatorios">
							<div class="fondo"></div>
						</div>
						<div class="form-group">
							6. &iquest;Tiene contemplado un plan de licenciamiento de tecnolog&iacute;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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.