表单元素不可点击答案

【问题标题】：form elements not clickable表单元素不可点击
【发布时间】：2019-10-11 11:25:38
【问题描述】：

我正在开发一个系统，我被要求做，但表单元素不可点击以在字段中输入任何信息，我尝试将表单标签移动到下面代码中的第一个 div 上方，以防万一这个问题，但不幸的是没有工作。我不确定还有什么可以尝试的，有人可以看看下面的代码

更新：我通过在 CSS 中将 zindex: 9999; 添加到 .form-group 类使表单元素正常工作，但现在日期时间选择器出现在选择下拉菜单的后面。我已将问题的屏幕截图上传到下面的链接

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

我的代码：

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

【问题讨论】：

我无法重现它，你能创建一个问题的sn-p吗？ jsfiddle.net/xy9L486p
我试图创建一个 jsfiddle，但这些字段在那里工作但不是内联表单，我从 php 文件中添加了其他代码，例如 javascript 和 fullcalendar 字段，但奇怪的是它仍然有效但是不要在php页面上工作我不明白，我会继续研究这个问题
我已经设法让表单元素现在可以点击了，我添加了 z-index: 9999;到 CSS 中的表单组类，但现在 datetimepicker 小部件出现在选择下拉菜单后面。我尝试添加 z-index: 9999;到 .bootstrap-datetimepicker-widget 但不起作用，我已将屏幕截图上传到上面的原始帖子
刚刚解决了这个问题，我添加了 z-index: 999;到选择菜单的 div 类，现在看起来一切正常使用的代码低于
马名：

标签： html css forms bootstrap-4

【解决方案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" />

【讨论】：

选择标签正在从数据库表中提取数据，因此需要选择标签而不是输入文本字段

【解决方案2】：

选择下拉菜单总是默认浏览器设置更高的 z-index。你有两排在另一排下面。您应该在第一行使用 position: relative 设置更高的 z-index 值；那么我希望它能按预期工作。

通过以下方式添加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-index 值，它都只适用于同级元素。但是在您的情况下，它落后于下一行元素，因为现代浏览器默认在每个下一个兄弟元素中设置更高的 z-index，直到我们明确设置。所以下面的行得到比顶行更高的 z-index。因此，无论在顶行容器内应用多少更高的 z-index 值，都将落后于下一行容器。

【讨论】：