Конфликт с условием в языке сценариев JavaScript

У меня есть 3 checkbox, которые ты выбираешь опционально 3 будки. Если я выбираю один из них и это дезактивирую благодаря тому, что я не желаю этот выбор, потому что я может быть ошибся, он посылает мне сообщение, которого я должен выбирать расписание.

Я хотел бы знать, как я могу делать это, если я выбираю второй или третий выбор и после уже я не хочу ее, что совсем не разместился в языке сценариев JavaScript и не послал мне сообщение, которого я должен выбирать дату и час.

Это мой код (также доступный в 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>
0
задан 25.01.2017, 23:30
0 ответов

... я представляю, что ты изучаешь, увидев твой код, поэтому мне хотелось бы реализовывать какие-то рекомендации по этому поводу:

  • Не вставляй твой код язык сценариев JavaScript посередине HTML
  • Идеальное состоит в том, чтобы у тебя был твой код во внешнем файле или в Вашем недостатке в единственном блоке языка сценариев JavaScript.
  • Размести твой код (и в общем большинство книжных магазинов язык сценариев JavaScript, если только не индекс я этому противоречу) в конце твоей страницы, непосредственно перед этикетка </body>
  • Попробуй давать более описательные идентификации твоим элементам, более, чем только content1, content2, date1, date2, и т.д.

Есть многие другие наблюдения, которые мне хотелось бы делать тебе, но уже гнев изучая в дорожке.

Сейчас! относительно твоего вопроса. Проблема, которая у тебя есть, состоит в том, что ты соглашаешься на событие submit, чтобы санкционировать поля, когда они выбирают checkbox, больше, когда de-seleccionas checkbox не ты de-suscribes события и он поэтому продолжает появляться ** alert*.

Как решение я предлагаю следующее:

  • Централизовать подписание в событие submit
  • В handler события submit проверять, является ли соответствующий checkbox выбранным и санкционировать как следствие.

Я рекомендую тебе смотреть документацию jQuery относительно следующих функций, которая использует в твоем коде:

Далее что-то из кода, измененного с решением:

<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 () {
  function onFormSubmit (e) {
    if (0 === $('input[type=checkbox]:checked').length) {
      e.preventDefault();
      alert('DEBES SELECCIONAR EL TIPO DE PASE(S)');
      return;
    }

    checkPaseEntrada = document.getElementById("pase_de_entrada");
    checkPaseSalida = document.getElementById("pase_de_salida");
    checkFaltaDia = document.getElementById("falta_dia");

    // Verify pase entrada
    if (checkPaseEntrada.checked && ($('#time').val() === '' || $('#date').val() === '')) {
      e.preventDefault();
      alert('DEBES SELECCIONAR HORA Y FECHA');
      return;
    }

    // -- Verify pase salida
    if (checkPaseSalida.checked && ($('#time2').val() === '' || $('#date2').val() === '')) {
      e.preventDefault();
      alert('DEBES SELECCIONAR HORA Y FECHA');
      return;
    }

    // -- Verify falta día
    if (checkFaltaDia.checked && ($('#date3').val() === '')) {
      e.preventDefault();
      alert('DEBES SELECCIONAR LA FECHA');
      return;
    }
  }

  function onCheckboxChange (e) {
    var $this = $(this);

    if ('pase_de_entrada' === $this.attr('id')) {
      $el = $('#content');
      $el.toggle(this.checked);
      if (!this.checked) {
        $('#date, #time').val('');
      }
    }

    if ('pase_de_salida' === $this.attr('id')) {
      $el = $('#content1');
      $el.toggle(this.checked);
      if (!this.checked) {
        $('#date2, #time2').val('');
      }

    }

    if ('falta_dia' === $this.attr('id')) {
      $el = $('#content2');
      $el.toggle(this.checked);
      if (!this.checked) {
        $('#date3').val('');
      }

    }
  }

  // -- Te aconsejo que utilices el ID como selector
  $('form#login-form').on('submit', onFormSubmit);
  $('input:checkbox').on('change', onCheckboxChange);
});
</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" /> 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" /> 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" /> Falta </label>
                    </div>
                  </div>
                </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 btn-primary" id="btn-formulario" name="enviar" value="enviar">Aceptar</button>
                <a href="menu.php" class="btn btn-default" id="btn-cancelar">Cancelar</a>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

Удачи! и привет.

2
ответ дан 03.12.2019, 17:30
  • 1
    Правильна solució n. Поскольку хорошо ты упоминаешь, я инициализируюсь под этим с 3 месяца и даже появляются много сомнений, я беру все рекомендации как часть обучения. И хорошо ты упоминаешь я учусь анализировать có я говорю и в доказательства и ошибку я обнаружил функциональность структур и функций. Большое спасибо из-за твоей опоры и seguiré анализируя и улучшая так же как aná lisis, практикуй и implementació n có digos. Привет –  26.01.2017, 00:57