How to Uncheck checkbox when i choose YES option from modal?

Saad Masood :

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);
        });

    }

Farzad Rastgar Sani :

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