时间戳

首页 > 解决方案 > 单击完整 div 链接上的单击框？

html - 单击完整 div 链接上的单击框？

问题描述

我有待办任务列表，这些任务是使用拉伸链接引导类制作的 div。单击每个待办事项，打开一个带有详细视图的模式。但是，那些 div（待办事项）已选中需要能够单击的按钮。现在，当您单击复选框时，模式会打开并且无法选中。

你能帮我解决这个问题吗？

<div>
  <div>
    <ul class="list-unstyled list-inline">
      <li class="list-inline-item"><div class="checkbox checkbox-success checkbox-single"><input type="checkbox"><label></label></div></li>
      <li class="list-inline-item">Name</li>
    </ul>
  </div>
  <a data-toggle="modal" data-target=".to-do-1" data-backdrop="static" data-keyboard="false" class="stretched-link"></a>
</div>

标签： htmlcssbootstrap-4

解决方案

根据问题中的信息，有 2 个选项：

  • 要么只将复选框放在比模态更高的 z-index 上...我为第一个复选框执行此操作，您可以在其中选中/取消选中复选框但不能触摸标签中的文本
  • 或将复选框及其标签放在比模态更高的 z-index 上...我为第二个复选框执行此操作，您可以在其中选择标签文本并选中/取消选中复选框
  • 添加了浅红色以便于观察行为...

下面的工作片段：

.myCheckbox,
.complete-checkbox-clickable {
  position: relative;
  z-index: 21;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(238, 149, 149, 0.23) !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div>
  <div>
    <ul class="list-unstyled list-inline">
      <li class="list-inline-item">
        <div class="checkbox checkbox-success checkbox-single">
          <input type="checkbox" class="myCheckbox">
          <label>(this is where you should put the label) </label>
        </div>
      </li>
      <li class="list-inline-item">Name</li>
      <br/>
      <li class="list-inline-item">
        <div class="checkbox checkbox-success checkbox-single complete-checkbox-clickable">
          <input type="checkbox" class="myCheckbox">
          <label>2nd checkbox </label>
        </div>
      </li>
    </ul>
  </div>
  <a data-toggle="modal" data-target=".to-do-1" data-backdrop="static" data-keyboard="false" class="stretched-link"></a>
</div>

推荐阅读