Как снять флажок, когда я выбираю вариант ДА из модального? - PullRequest
Новая
       1

Как снять флажок, когда я выбираю вариант ДА из модального?

4 голосов
/ 24 февраля 2020

Я сталкиваюсь с проблемой, когда я отмечаю флажок, который показывает модальное всплывающее окно, и подтверждаю пользователю, хотите ли вы проверить эту строку, когда я проверяю и выбираю опцию ДА изменение цвета фона всей строки , и когда я снимаю флажок, цвет фона флажка строки таблицы удаляется, но кнопка все еще проверяется. Как я могу решить эту проблему?

Код 

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

    }

Ответы [ 3 ]

1 голос
/ 24 февраля 2020

Пожалуйста, обратитесь к коду ниже, проблема в классе переключения, если вы выбираете вариант «Да», если он уже выбран. Вместо этого я использовал класс добавления / удаления, остальная часть логи c такая же: 

$(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>
1 голос
/ 24 февраля 2020

Я исправил ваш код и также создал скрипку: 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);
    });

}
1 голос
/ 24 февраля 2020

Это происходит потому, что в обоих случаях вы нажимаете 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');
        }
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...