Question

我有待办事项清单，这些清单是使用拉伸的链接引导程序类作为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>

Answer 1

基于问题中的信息，有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>

单击整个div链接上的点击框？

1 个答案: