没有标签的“for”属性的自定义复选框（Bootstrap 4）

Question

有没有办法在不使用输入上的 和标签上的id属性的情况下仍然拥有 Bootstrap 4 自定义复选框样式？for当您删除它时，检查的样式不存在。

例子：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="custom-control custom-checkbox mb-3">
  <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
  <label class="custom-control-label">Check this custom checkbox</label>
</div>

我尝试用标签包装输入，但这似乎也没有做任何事情。有没有一种方法可以避免给输入提供静态 id 并且仍然获得 Boostrap 样式的复选框？谢谢！

Answer 1

这是最简单的解决方案。标签应用作可单击复选框的包装。

<div class="custom-control custom-checkbox">
  <label><input type="checkbox" name="checkbox-name" class="custom-control-input">
    <div class="custom-control-label"></div>
    </label>
</div>