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):
<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>