javascript - 当我从模式中选择"is"选项时如何取消选中复选框？

Question

当我检查模式弹出窗口显示的复选框并向用户确认您是否要检查此行时，当我检查并选择选项是整行背景颜色时，我遇到了问题更改，当我取消选中表行的复选框背景颜色时删除，但按钮仍处于选中状态。我该如何解决这个问题？

Code

.highlight {
    background-color: #5bff5b !important;
}

<div class="panel panel-default no-display" >
  <div class="panel-heading">
    <i class="fa fa-money" aria-hidden="true"></i>
    Accounting
  </div>
  <div class="panel-body">
    <table class="table table-bordered table-striped table-responsive align-center dataTable multiple-filter no-footer" >
      <thead class="transaction-table">
        <tr>

              <th>Statement number</th>
              <th>Affiliate Code</th>
              <th>Period start - end</th>
              <th>Amount EUR</th>
              <th>Due Date</th>
              <th>Status</th>
              <th class="text-center" >Action</th>
        </tr>
      </thead>
      <tbody>
            <tr>
                <td>1</td>
                <td>1234567</td>
                <td>2020-10-10</td>
                <td>32323</td>
                <td>2020-10-20</td>
                <td class="text-center">
                    <span class="label label-success">
                       Due
                    </span>
                </td>
                <td class="text-center">
                    <input type='checkbox' data-toggle="tooltip" data-original-title="Mark as settled" name='chkOrgRow'/>
                    <i class="fa fa-paper-plane hand send_report" data-toggle="tooltip" title="" data-id="2121" aria-hidden="true" data-original-title="Send report"></i>
                    <i class="fa fa-thumb-tack hand mark_as_settled" data-toggle="tooltip" title="" data-id="2121" aria-hidden="true" data-original-title="Mark as on-hold"></i>
                    <i class="fa fa-history hand mark_as_settled" data-toggle="tooltip" title="" data-id="2121" aria-hidden="true" data-original-title="On-hold history"></i>
                </td>
            </tr>
       </tbody>
     </table>
      <div class="modal fade" id="ModalConfirmSettled">
          <div class="modal-dialog">
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

                      </button>
                      <h4 class="modal-title">Mark as settled</h4>

                  </div>
                  <div class="modal-body">
                      <p>Are you sure?</p>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="buttons btn btn-default" data-dismiss="modal">Close</button>
                      <button type="submit" class="buttons btn btn-primary" id="confirm" >Yes</button>
                  </div>
              </div>
              <!-- /.modal-content -->
          </div>
   </div>

   <div class="modal fade" id="payout_details_modal" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content col-xs-12 no-gutter">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title text-center">Merchant Pay-out details</h4>
        </div>
        <div class="modal-body">
          <div class="mini-loader text-center">
            <i class="fa fa-spinner fa-spin fa-5x" aria-hidden="true"></i>
          </div>
          <div class="col-xs-12" id="pay_out_details">
          </div>
        </div>
      </div>
    </div>
  </div>

Javascript

   $(function () {
        var checkbox_one= '';
        $("[name='chkOrgRow']").change(function(e) {
            $('input[name=chkOrgRow]').prop('checked', false);
            // console.log('clicked');
            checkbox_one = $(this);
            openmodal();
        });

        $('.buttons').on('click', function () {
            var yes = $(this).text();
            if (yes === 'Yes') {
                // console.log('yes');
                $("#ModalConfirmSettled").modal('hide');
                $('input[name=chkOrgRow]').prop('checked', true);

                checkbox_one.parents('tr').toggleClass('highlight');
                //return true;
            } else {
                console.log('close');
            }
        });
    });

    function openmodal() {
        $('#ModalConfirmSettled').modal('show', function (data) {
            console.log('data:' + data);
        });

    }

Answer 1

发生这种情况是因为在这两种情况下，您在模式上按 YES 并执行此行。

    $('input[name=chkOrgRow]').prop('checked', true);

将 JS 更改为:

 $(function () {
    var checkbox_one= '';
    $("[name='chkOrgRow']").change(function(e) {
        // console.log('clicked');
        checkbox_one = $(this);
        openmodal();
    });

    $('.buttons').on('click', function () {
        var yes = $(this).text();
        if (yes === 'Yes') {
            // console.log('yes');
            $("#ModalConfirmSettled").modal('hide');
            if(!$('input[name=chkOrgRow]').prop('checked')){
                $('input[name=chkOrgRow]').prop('checked', false);
            }else{
               $('input[name=chkOrgRow]').prop('checked', true);
            }


            checkbox_one.parents('tr').toggleClass('highlight');
            //return true;
        } else {
            console.log('close');
        }
    });
});