当我从模态中选择 YES 选项时如何取消选中复选框？

Question

I am facing the issue when i check the checkbox the modal popup shows and confirm to the user do you want to check this row, when i check and select the option YES the whole row background color change, and when i uncheck the checkbox background color of table row remove but button is still check. How can i sort out this issue?

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

That happens because in both cases you press YES on modal and this line is executed.

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

Change JS to this:

 $(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');
        }
    });
});

Answer 2

Please refer below code, problem is with toggle class if you selct "Yes" option if its already selected. Instead I used add/remove class, Rest of the logic is same:

 $(function() { var checkbox_one = ''; $("[name='chkOrgRow']").change(function(e) { checkbox_one = $(this); openmodal(); }); $('.buttons').on('click', function() { var yes = $(this).text(); if (yes === 'Yes') { $("#ModalConfirmSettled").modal('hide'); checkbox_one.parents('tr').toggleClass('highlight'); } else { console.log('close'); } $('.highlight').css("background-color") ? $('input[name=chkOrgRow]').prop('checked', true) : $('input[name=chkOrgRow]').prop('checked', false); }); }); function openmodal() { $('#ModalConfirmSettled').modal('show', function(data) { console.log('data:' + data); }); }

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

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.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://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="table-wrapper" id="pay_out_page"> <div class="col-md-12"> <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>

Answer 3

I have fixed your code and create a fiddle as well: https://jsfiddle.net/efnk0mbz/

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

    $('.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');
        }
    });
});

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

}