Bootstrap 4 如何在单击复选框时打开模式引导？_Bootstrap 4

Bootstrap 4 如何在单击复选框时打开模式引导？

bootstrap-4

Bootstrap 4 如何在单击复选框时打开模式引导？,bootstrap-4,Bootstrap 4,我有一个自定义复选框。我想要的是在选中复选框时打开一个引导模式。我想要一个引导模式打开，就像单击按钮一样。希望你能理解我的问题。我该怎么做呢 <div class="form-group mr-5" data-toggle="modal" data-target="#toddlers"> <input class="form-check-input" type="checkbox" name="toddlers" id="toddlers"> <la

我有一个自定义复选框。我想要的是在选中复选框时打开一个引导模式。我想要一个引导模式打开，就像单击按钮一样。希望你能理解我的问题。我该怎么做呢

<div class="form-group mr-5" data-toggle="modal" data-target="#toddlers">
    <input class="form-check-input" type="checkbox" name="toddlers" id="toddlers">
    <label class="form-check-label" for="toddlers">toddlers</label>
</div>

<div class="modal fade" id="toddlers" tabindex="-1" role="dialog" aria-labelledby="toddlersLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="toddlersLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>


幼儿
情态标题
&时代；
...
关
保存更改

请签出此代码。您在输入框和模型中使用了相同的id

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>
</head>
<body>
<div class="form-group mr-5" data-toggle="modal" data-target="#toddlers_1">
    <input class="" type="checkbox" name="toddlers" id="toddlers">
    <label class="form-check-label" for="toddlers">toddlers</label>
</div>

<div class="modal fade" id="toddlers_1" tabindex="-1" role="dialog" aria-labelledby="toddlersLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="toddlersLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>


引导示例
幼儿
情态标题
&时代；
...
关
保存更改

它工作正常。你遇到了什么问题？不，它不起作用。当我点击复选框时，我看到了这一点。它显示淡入淡出，但没有打开modalPlease检查下面的答案。您使用了相同的id。因为您面临问题。我已经更新了答案，请尝试。它没有发生