表单元素不可点击

Question

我正在开发一个被要求执行的系统，但不能单击表单元素以在字段中输入任何信息，我尝试将表单标签移至下面代码中的第一个div上方，以防该问题，但不幸的是没有奏效。我不确定还有什么尝试，可以请人看看下面的代码

更新：通过在CSS的zindex: 9999;类中添加.form-group到表单元素，我可以使用表单元素，但是datetimepicker现在出现在选择下拉菜单的后面。我已将问题的屏幕快照上传到下面的链接

这是我的问题的屏幕截图：

我的代码：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12" id="detail">

  <form name="addData" id="addData" action="" method="post">

    <div class="row">

      <div class="form-group col-lg-3">
        <input type="hidden" name="eventID" id="eventID" class="form-control">
        <label for="StartDate">Start Date: </label>
        <input type="date" class="form-control" required name="StartDate" id="StartDate" />
      </div>

      <div class="form-group col-lg-3">
        <label for="StartTime" style="margin: 0 0 15px 0;">Start Time: </label>
        <div class='input-group date' id='datetimepicker3'>
          <input name="StartTime" id="StartTime" type='text' required class="form-control" />
          <span class="input-group-addon">
                        <i class="fa fa-clock-o"></i>
                    </span>
        </div>
        <script type="text/javascript">
          $(function() {
            $('#datetimepicker3').datetimepicker({
              format: 'LT'
            });
          });
        </script>
      </div>

      <div class="form-group col-lg-3">
        <label for="StartDate">End Date: </label>
        <input type="date" required class="form-control" name="EndDate" id="EndDate" />
      </div>

      <div class="form-group col-lg-3">
        <label for="EndTime" style="margin: 0 0 15px 0;">End Time: </label>
        <div class='input-group date' id='datetimepicker4'>
          <input name="EndTime" id="EndTime" required type='text' class="form-control" />
          <span class="input-group-addon">
                        <i class="fa fa-clock-o"></i>
                    </span>
        </div>
        <script type="text/javascript">
          $(function() {
            $('#datetimepicker4').datetimepicker({
              format: 'LT'
            });
          });
        </script>
      </div>

    </div>

    <div class="row">

      <div class="form-group col-lg-3">
        <label for="riders_name">Riders Name: </label>
        <select class="form-control" style="height: 34px;" required name="riders_name" id="riders_name"></select>
      </div>

      <div class="form-group col-lg-3">
        <label for="horses_name">Horses Name : </label>
        <select class="form-control" style="height: 34px;" required name="horses_name" id="horses_name">
          <option value="">--Empty--</option>
        </select>
      </div>

      <div class="form-group col-lg-3">
        <label for="instructor_name">Instructor Name : </label>
        <select class="form-control" style="height: 34px;" required name="instructor_name" id="instructor_name">
          <option value="">--Empty--</option>
        </select>
      </div>

      <div class="form-group col-lg-3">
        <label for="groom_name">Groom Name : </label>
        <select class="form-control" style="height: 34px;" required name="groom_name" id="groom_name">
          <option value="">--Empty--</option>
        </select>
      </div>

    </div>

    <br>

    <div class="row">

      <div class="form-group col-lg-9">
        <label for="comments">Comments : </label>
        <textarea name="comments" id="comments" class="form-control"></textarea>
      </div>

      <div class="form-group col-lg-3">
        <label for="Repeat">Repeat : </label>
        <select class="form-control" style="height: 34px;" required name="Repeat" id="Repeat">
          <option value="0">none</option>
          <option value="1">Daily</option>
          <option value="2">Weekly</option>
          <option value="3">Monthly</option>
        </select>
      </div>

    </div>

    <div class="row">

      <div class="form-group col-lg-1">
        <button type="submit" class="btn btn-primary" name="submit" id="submit">Submit</button>
      </div>

      <div class="form-group col-lg-1">
        <button type="submit" class="btn btn-danger" name="cancel" id="cancel">Cancel</button>
      </div>

      <div class="form-group col-lg-5">
        &nbsp;
      </div>

      <div class="form-group col-lg-5">
        &nbsp;
      </div>

    </div>

  </form>

</div>

<script>
  $.getJSON("fullcalendar/getriders.php", function(data) {
    var select = $('#riders_name'); //combo/select/dropdown list
    if (select.prop) {
      var options = select.prop('options');
    } else {
      var options = select.attr('options');
    }
    $('option', select).remove();

    $.each(data, function(key, value) {
      options[options.length] = new Option(value['name'], value['id']);
    });
  });

  $.getJSON("fullcalendar/getinstructors.php", function(data) {
    var select = $('#instructor_name'); //combo/select/dropdown list
    if (select.prop) {
      var options = select.prop('options');
    } else {
      var options = select.attr('options');
    }
    $('option', select).remove();
    $.each(data, function(key, value) {
      options[options.length] = new Option(value['name'], value['id']);
    });
  });


  $.getJSON("fullcalendar/getgrooms.php", function(data) {
    var select = $('#groom_name'); //combo/select/dropdown list
    if (select.prop) {
      var options = select.prop('options');
    } else {
      var options = select.attr('options');
    }
    $('option', select).remove();
    $.each(data, function(key, value) {
      options[options.length] = new Option(value['name'], value['id']);
    });
  });
</script>

Answer 1

我在您的表单中看到几个空的<select></select>标签。我怀疑您打算在那里输入文本字段？如果是这样，您需要将<select></select>替换为<input type="text" />。

例如：

<label for="riders_name">Riders Name: </label>
<select class="form-control" style="height: 34px;" required name="riders_name" id="riders_name"></select>

...应该是：

<label for="riders_name">Riders Name: </label>
<input class="form-control" type="text" style="height: 34px;" required name="riders_name" id="riders_name" />

Answer 2

选择下拉菜单，浏览器始终默认设置较高的z-index。您在另一排下面有两排。您应该在第一行中设置较高的z-index值，位置为：relative;那么我希望它会按预期工作。

通过以下方式添加CSS代码：

.higher-z-index {
    postion: relative; // This line help z-index work relatively 
    z-index: 999;
}

您的标记将是这样的：

<div class="row higher-z-index">
    .....
    ....
</div>
<div class="row">
    .....
    ....
</div>

为什么使用这种方法：

请记住，无论在.form-group选择器中应用多少z索引值，该值仅对同级元素有效，这都是必需的。但是在您的情况下，它落后于下一行元素，因为现代浏览器默认情况下会在每个下一个兄弟元素中设置更高的z-index，直到我们明确设置为止。因此，下排的z-index值高于上排。因此，不管在顶部行容器中应用多少个更高的z-index值，都将落在下一行容器中。