コントロールからレイヤのチェックを外したときにモーダルウィンドウを閉じる方法

Question

ユーザーがメニューからレイヤをチェックするときにポップアップするモーダルウィンドウがあります。ユーザーは、このモーダルウィンドウを閉じるには、ウィンドウ上の "X"アイコンをクリックするか、マップをクリックします。 しかし、ユーザーがメニューからレイヤのチェックを外すと、再びモーダルがポップアップします。

ユーザーがメニューからレイヤーをオフにしたときにモーダルが再度ポップアップしないように、コードを書くのに助けが必要です。

注：マップ用にはリーフレットを、モーダル用にはブートストラップを使用しています。カスタムメニューコントロールのための

<label><input id="myRoute" type="checkbox" class="check">My Route</label> 

JS：

var overlaysMenuCtrl = L.Control.extend({ ... blah blah... }); 

map.addControl(new overlaysMenuCtrl)()); 

カスタムレイヤーメニューの

<div id="myRouteModal">blah blah</div> 

HTML：モーダルため

HTML：

は、ここに私の仮説的なコードです の

JS：

function toggleLayer(checked, layer){ 
    if(checked){ 
     map.addLayer(layer); 
    } else { 
     map.removeLayer(layer); 
    } 
} 

$(".check").change(function(){ 
    var layerClicked = $(this).attr("id"); 
//Turn layers on and off based on the ID of the radio checked 
    switch(layerClicked){ 
    case "myRoute": toggleLayer(this.checked, myRoute); 
     $('myRouteModal').modal(modalOptions); 
    break; 
    ...and other layers ... 
} 
}); 

Answer 1

あなたのコード：

switch(layerClicked){ 
    case "myRoute": toggleLayer(this.checked, myRoute); 
     $('myRouteModal').modal(modalOptions); 

あなたは毎回$('myRouteModal').modal(modalOptions);を呼び出します。代わりに、クリックされたチェックボックスがオンになっているかどうかをテストする必要があります。チェックボックスがチェックされている場合にのみ、.modal() -functionに電話する必要があります。

正しいコードは次のようになります。あなたは例を提供

case "myRoute": toggleLayer(this.checked, myRoute); 
    if(this.checked) { 
     $('myRouteModal').modal(modalOptions); 
    } 
break;