Tengo 3 checkbox, los cuales seleccionas opcional 3 casillas. Si selecciono uno de ellos y lo desactivo debido a que no deseo esa opción porque quizá me equivoqué, me manda un mensaje de que debo seleccionar un horario. Quisiera saber cómo lo puedo hacer, si selecciono una segunda o tercera opción y después ya no la quiero, que no me reserve nada en JavaScript y no me mande mensaje de que debo seleccionar una fecha y hora. Éste es mi código (también disponible en [JSFifdle][1]): <!-- begin snippet: js hide: false console: false babel: false --> <!-- language: lang-html --> <link href="http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700" rel="stylesheet" type="text/css"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> <script type="text/javascript"> function showContent() { element = document.getElementById("content"); check = document.getElementById("pase_de_entrada"); if (check.checked) { element.style.display = 'block'; $('form').submit(function(e) { if ($('#time').val() === '' || $('#date').val() === '') { e.preventDefault(); alert('DEBES SELECCIONAR HORA Y FECHA'); } }); } else { element.style.display = 'none'; document.getElementById("date").value = ""; document.getElementById("time").value = ""; } } </script> <script type="text/javascript"> function showContent1() { element = document.getElementById("content1"); check = document.getElementById("pase_de_salida"); if (check.checked) { element.style.display = 'block'; $('form').submit(function(e) { if ($('#time2').val() === '' || $('#date2').val() === '') { e.preventDefault(); alert('DEBES SELECCIONAR HORA Y FECHA'); } }); } else { element.style.display = 'none'; document.getElementById("date2").value = ""; document.getElementById("time2").value = ""; } } </script> <script type="text/javascript"> function showContent2() { element = document.getElementById("content2"); check = document.getElementById("falta_dia"); if (check.checked) { element.style.display = 'block'; $('form').submit(function(e) { if ($('#date3').val() === '') { e.preventDefault(); alert('DEBES SELECCIONAR LA FECHA'); } }); } else { element.style.display = 'none'; document.getElementById("date3").value = ""; } } </script> <body> <div class="container"> <div class="inner-bg"> <div class="container"> <div class="row"> <div class="col-sm-8 col-sm-offset-2 text"> </div> </div> <div class="row"> <div class="col-lg-offset-1 col-xs-12 col-lg-10 form-box"> <div class="form-bottom"> <form role="form" class="login-form" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="POST" id="login-form"> <fieldset class="form-group row"> <label class="col-sm-2">Goce de Primas</label> <div class="col-sm-3"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="goce_de_primas" id="gridRadios1" value="Con goce de primas" checked>Con Goce de Primas</label> </div> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="goce_de_primas" id="gridRadios2" value="Sin goce de primas">Sin Goce de Primas</label> </div> </div> <label class="col-sm-2">Tipo de Pase</label> <div class="col-sm-3"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" id="pase_de_entrada" type="checkbox" name="chk[]" value="Pase de entrada" onchange="javascript:showContent()" /> Pase de Entrada </label> </div> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" id="pase_de_salida" type="checkbox" name="chk[]" value="Pase de salida" onchange="javascript:showContent1()" /> Pase de Salida </label> </div> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" id="falta_dia" type="checkbox" name="chkfalta" value="Falta todo el dia" onchange="javascript:showContent2()" /> Falta </label> </div> </div> <script type="text/javascript"> $('form').submit(function(e) { if ($('input[type=checkbox]:checked').length === 0) { e.preventDefault(); alert('DEBES SELECCIONAR EL TIPO DE PASE(S)'); } }); </script> </fieldset> <!--Zona del Calendario--> <div id="content" style="display: none;"> <div class="form-group row"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js"></script> <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Fecha a Justificar Entrada</label> <div class="col-md-4"> <input class="form-control" id="date" name="date[]" type="text" value="" readonly="readonly" /> </div> <script> $(document).ready(function() { var date_input = $('input[name="date[]"]'); var options = { format: "dd/mm/yyyy", startDate: "-9d", clearBtn: true, language: "es", forceParse: false, daysOfWeekDisabled: "0", autoclose: true, todayHighlight: true, }; date_input.datepicker(options); }) </script> <!--Zona del Hora --> <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="hora_justificar">Hora a Justificar</label> <div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true"> <input type="text" class="form-control" name="time[]" id="time" value="" readonly="readonly"> <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span> </div> <script type="text/javascript" src="files/clockpicker/src/clockpicker.js"></script> <link rel="stylesheet" href="files/clockpicker/src/clockpicker.css" /> <script type="text/javascript"> $('.clockpicker').clockpicker(); var time_input = $('input[name="time[]"]'); </script> </div> </div> <div id="content1" style="display: none;"> <div class="form-group row" id="div2"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js"></script> <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Fecha a Justificar Salida</label> <div class="col-md-4"> <input class="form-control" id="date2" name="date[]" type="text" value="" readonly="readonly" /> </div> <script> $(document).ready(function() { var date_input = $('input[name="date[]"]'); var options = { format: 'dd/mm/yyyy', container: container, todayHighlight: true, autoclose: true, }; date_input.datepicker(options); }) </script> <!--Zona del Hora --> <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="hora_justificar">Hora a Justificar</label> <div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true"> <input type="text" class="form-control" name="time[]" id="time2" value="" readonly="readonly"> <span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span> </div> <script type="text/javascript"> $('.clockpicker').clockpicker(); var time_input = $('input[name="time[]"]'); </script> </div> </div> <div id="content2" style="display: none;"> <div class="form-group row" id="div3"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js"></script> <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Fecha del</label> <div class="col-md-4"> <input class="form-control" id="date3" name="date[]" type="text" value="" readonly="readonly" /> </div> <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Al </label> <div class="col-md-4"> <input class="form-control" id="date3" name="date[]" type="text" value="" readonly="readonly" /> </div> <script> $(document).ready(function() { var date_input = $('input[name="date[]"]'); //our date input has the name "date" var options = { format: 'dd/mm/yyyy', container: container, todayHighlight: true, autoclose: true, }; date_input.datepicker(options); }) </script> </div> </div> <button type="submit" class="btn" id="btn-formulario" name="enviar" value="enviar">Aceptar</button> </form> <button type="submit" class="btn" id="btn-cancelar" name="cancelar" value="cancelar">Cancelar</button> <script type="text/javascript"> document.getElementById("btn-cancelar").onclick = function() { location.href = "menu.php"; }; </script> </div> </div> </div> </div> </div> <!-- end snippet --> [1]: https://jsfiddle.net/juanelobus/brnx9xv8/7/