javascript - 单击模态按钮关闭模态和复选框检查已禁用

Question

我想创建我的复选框，以便在我的模式按钮被点击而不是点击它时进行检查。复选框被禁用和未选中。 按钮使模态消失或关闭并使复选框自动选中。我现在正在使用底部的以下代码。

$("#checkbox").prop("disabled", true);

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal">
  Open Modal
</button>

 <div class="checkbox">
    <label>
      <input type="checkbox" id="checkbox" name="checkbox"> Check me out
    </label>
  </div>
  
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>Ang Lorem Ipsum ay ginagamit na modelo ng industriya ng pagpriprint at pagtytypeset. Ang Lorem Ipsum ang naging regular na modelo simula pa noong 1500s, noong may isang di kilalang manlilimbag and kumuha ng galley ng type at ginulo ang pagkaka-ayos nito upang makagawa ng libro ng mga type specimen. Nalagpasan nito hindi lang limang siglo, kundi nalagpasan din nito ang paglaganap ng electronic typesetting at nanatiling parehas. Sumikat ito noong 1960s kasabay ng pag labas ng Letraset sheets na mayroong mga talata ng Lorem Ipsum, at kamakailan lang sa mga desktop publishing software tulad ng Aldus Pagemaker ginamit ang mga bersyon ng Lorem Ipsum.</p>
           
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success " data-dismiss="modal">Agree</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Answer 1

要实现这一点，您可以将 click 事件处理程序挂接到模式中的按钮，然后将复选框的 checked 属性设置为 true 和 disabled 到 false。试试这个:

var $checkbox = $("#checkbox").prop("disabled", true);

$('#myModal').on('click', '#agree-button', function() {
  $checkbox.prop({
    'checked': true,
    'disabled': false
  });
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal">
  Open Modal
</button>

<div class="checkbox">
  <label>
      <input type="checkbox" id="checkbox" name="checkbox"> Check me out
    </label>
</div>

<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Ang Lorem Ipsum ay ginagamit na modelo ng industriya ng pagpriprint at pagtytypeset. Ang Lorem Ipsum ang naging regular na modelo simula pa noong 1500s, noong may isang di kilalang manlilimbag and kumuha ng galley ng type at ginulo ang pagkaka-ayos
          nito upang makagawa ng libro ng mga type specimen. Nalagpasan nito hindi lang limang siglo, kundi nalagpasan din nito ang paglaganap ng electronic typesetting at nanatiling parehas. Sumikat ito noong 1960s kasabay ng pag labas ng Letraset sheets
          na mayroong mga talata ng Lorem Ipsum, at kamakailan lang sa mga desktop publishing software tulad ng Aldus Pagemaker ginamit ang mga bersyon ng Lorem Ipsum.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success " data-dismiss="modal" id="agree-button">Agree</button>
      </div>
    </div>
  </div>
</div>