1

AJAX を使用してユーザーをアクティブ化および非アクティブ化するためのチェックボックス (Bootstrap Switch ライブラリを使用してオン/オフ トグルとして機能する) があります。

ユーザーがボックスのチェックを外すと、この関数が起動されます:

$('.user-status-ckbx').on('switchChange.bootstrapSwitch'...

confirm() ダイアログがポップアップし、ユーザーを非アクティブ化/アクティブ化するかどうかをユーザーに尋ねます。ユーザーが「いいえ」をクリックすると、ボタンは以下を使用して元の状態に戻されます。

$("#" + e.currentTarget.id).bootstrapSwitch('toggleState');

私が抱えている問題は、toggleState() が実行されるたびに、switchChange.bootstrapSwitch も再度実行されることです。これにより、ユーザーがメッセージを確認した場合にのみ消える、終わりのない confirm() メッセージが送信されます。

実際のユーザーのクリックとプログラムで生成されたトグルに基づいて、switchChange.bootstrapSwitch メソッドが実行されないようにする効率的な方法はありますか?

私はすでに試しました：

e.originalEvent !== undefined

と

e.which

他の同様の質問で示唆されているように、それらのどれも機能せず、「e」オブジェクトにも表示されません...

<script>  
    $(".user-status-ckbx").bootstrapSwitch('size', 'mini');
    $(".user-status-ckbx").bootstrapSwitch('onText', 'I');
    $(".user-status-ckbx").bootstrapSwitch('offText', 'O');

    //ajax to activate/deactivate user
    $('.user-status-ckbx').on('switchChange.bootstrapSwitch', function(e){

        var currentDiv = $("#" + e.currentTarget.id).bootstrapSwitch('state');
        if( currentDiv == false){
          var confirmed = confirm("Are you sure you wish to deactivate this user? They will no longer be able to access any forms.");
          if(confirmed == true){
            changeActivationStatus($(this).val());
          } else {
            $("#" + e.currentTarget.id).bootstrapSwitch('toggleState');
          }
        } else {
          var confirmed = confirm("Are you sure you wish to activate this user? Deactivated users which were previously active will have the same permissions prior to their de-activation unless changed manually.");
          if(confirmed == true){
            changeActivationStatus($(this).val());
          } else {
            $("#" + e.currentTarget.id).bootstrapSwitch('toggleState');
          }
        }
    });

    function changeActivationStatus(userId){
      $.post("{{ path('isactive') }}", {userId: userId})
          .done(function(data){
            console.log("Finished updating " + userId);
          })
          .fail(function(){
            console.log("User could not be updated");
          });
    };
 </script>
4

2 に答える 2

2

プログラムで切り替えるときにイベントを防ぐ方法があります。

Bootstrap スイッチにオプションを追加する必要があります。

var options = {
        onSwitchChange: function (event, state) {
            // Return false to prevent the toggle from switching.
            return false;
        }
    };
$(".user-status-ckbx").bootstrapSwitch(options);

プログラムでボタンを切り替える場合は、2 番目の引数を追加する必要があります。

$("#" + e.currentTarget.id).bootstrapSwitch('toggleState', true);

JSFiddle: https://jsfiddle.net/Ravvy/npz8j3pb/

于 2015-11-19T23:37:32.583 に答える
-1 
$(".uid-toggle").change(function (event) {
    var option = confirm('Are you sure, you want to change status?');
    console.log(`$(this).prop('checked')`);
    if (option) {
    } else {
        if ($(this).prop('checked')) {
            $(this).prop('checked', !$(this).prop('checked'));                
            $(this).parent().removeClass('btn-primary off');
            $(this).parent().addClass('btn-danger off');
        } else {
            $(this).prop('checked', !$(this).prop('checked'));
            $(this).parent().addClass('btn-primary off');
            $(this).parent().removeClass('btn-danger off');
        }
    }
});
于 2020-03-20T16:32:17.830 に答える