Question

我正在处理Bootstrap Modal，我希望在Checkbox检查事件的模式中显示和隐藏div部分。

即使我已正确匹配我的复选框检查逻辑。它与实现没有相同的反映。我能解决这个问题的任何方法。

<div class="modal-body">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="ddd" />
    <label class="form-check-label" for="ddd">
      DDD
    </label>
  </div>

  <script>
    $("#ddd").change(function () {
      if (this.checked) {
        $("aaa").toggle();
      }
    })
  </script>

  <!--Begin the Show/Hide Section-->
  <div id="aaa">
    <form>
      <div class="form-group">
        <label for="ccc">ccc</label>
        <input type="text" class="form-control" id="question" disabled />
      </div>
    </form>
  </div>
</div>

Answer 1

您忘记在jquery选择器中添加＃。 $('#aaa').toggle();

您也可以删除您的检查器。如果你想先隐藏它，只需在aaa div中添加display:none，然后.toggle（）将完成剩下的工作。因此，当未选中复选框时，它将被隐藏，如果您选中了复选框，则会显示。

＆＃13;

$("#ddd").change(function () {
        $("#aaa").toggle();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="modal-body">
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="ddd" />
    <label class="form-check-label" for="ddd">
        DDD
    </label>
</div>

<div id="aaa" style="display:none">
    <form>
        <div class="form-group">
            <label for="ccc">ccc</label>
            <input type="text" class="form-control" id="question" disabled />
        </div>
    </form>
</div>
</div>

＆＃13;

显示Div部分以在模态中显示/隐藏

1 个答案: