模态按钮单击关闭模态和复选框选中已禁用

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>