特定の状態でブートストラップトグル/スイッチが特定の状態でonChangeイベントを防止する

Question

ブートストラップスイッチを使用して、トリガしたユーザーでない場合にonChangeトリガが発生しないようにします。

私はAJAXスクリプトを実行するためにonChangeトリガを使用します。しかし、ページがリフレッシュされると、私はJSON配列に基づいてチェックステートを変更します。問題は、私がこれを行うと、onChangeイベントが発生し、onChangeを発行しているユーザーでない限り、AJAXスクリプトが実行されないようにすることです。 nodeJsサーバーへのソケット接続によって、ページがロードされた後もスイッチが変更される可能性があります。

チェックボックスにそれらを自己が次のようになります。これは、スイッチが変更されたときにトリガされる関数です

<input type="checkbox" class="switch" id="clientid_{{$client->id}}" name="toggle" onChange="toggleClient({{$client->id}});"> 

：

function toggleClient(id) 
{ 
    var toggle = $("#clientid_"+id).is(":checked"); 
    var url = "/toggleClient"; 

    $.ajax({ 
     type: "POST", 
     url: url, 
     data :{ 
      "toggle": toggle, 
      "id": id, 
     } 
    }); 
} 

これは、ページがロードされたときに実行されるものですが、

$(document).ready(function() { 
    //... getting obj.params.clientList herre 
    var clientStatusList = JSON.parse(obj.params.clientList); 
    for(client in clientStatusList) 
    { 
     if(clientStatusList[client].status == true) 
     { 
      $("#clientid_" + clientStatusList[client].id).prop('checked', true).change(); 
     } 
     else 
     { 
      $("#clientid_" + clientStatusList[client].id).prop('checked', false).change(); 
     } 
    } 
}); 

上記の問題は、ページがリフレッシュされ、すべてのスイッチがse clientStatusListに基づいて、onChangeイベントがトリガーされ、toggleClientメソッドもトリガされます。これは、ユーザーがonChangeを実行したときにのみ発生します。

これは可能なのですか、それとも別のものが必要ですか？

Answer 1

あなたはjavascriptの上で値を変更した後、イベントをバインドすることができ、次のいずれか

$(document).ready(function() { 
    //... getting obj.params.clientList herre 
    var clientStatusList = JSON.parse(obj.params.clientList); 
    for(client in clientStatusList) { 
     if(clientStatusList[client].status == true) { 
     $("#clientid_" + clientStatusList[client].id).prop('checked', true).change(); 
     } else { 
     $("#clientid_" + clientStatusList[client].id).prop('checked', false).change(); 
     } 
     $("#clientid_" + clientStatusList[client].id).change(function() { 
      toggleClient($(this).prop('id')); 
     } 
    } 
}); 

またはあなただけのページがお役に立てば幸いです

var loaded = false; 
function toggleClient(id) { 
    if (!loaded) return; 
    var toggle = $("#clientid_"+id).is(":checked"); 
    var url = "/toggleClient"; 

    $.ajax({ 
     type: "POST", 
     url: url, 
     data :{ 
      "toggle": toggle, 
      "id": id, 
     } 
    }); 
} 
$(document).ready(function() { 
    loaded = true; 
}); 

をロードされているかどうかを確認するブール値を設定することができます。