jQueryのチェックボックスイベントが累積

このロジックとの目標がある追加さ： -jQueryのチェックボックスイベントが累積

チェックボックスを開くには、ブートストラップモーダルを取得するに確認したり、そのオプションをキャンセルモーダル内の2つのボタンを持っているために
をクリックします。
問題は、複数のチェックボックスがクリックされたとき、それらはすべて同じイベントを共有し、より多くのあなたが行われることがよりをクリックしてくださいということです

に影響を与えてクリックされたONLYチェックボックスを持っています。私はこの最終的なポイントを得る運がなかったけれども、試みるために様々なソリューションを試してきました。

私は本当に助けに感謝します！

//listen for a click on the checkbox 
 
var confirm = $('#validationConfirm'); 
 
var cancel = $('#validationCancel'); 
 

 
function modalCheck(e, element) { 
 
    console.log(e.srcElement.checked) 
 
    if (amIclicked(e, element)) { 
 
    confirm.click(function() { 
 

 
     console.log(e.srcElement) 
 
     element.checked = true 
 
    }); 
 
    } 
 
    if (amIclicked(e, element)) { 
 
    cancel.click(function() { 
 

 
     console.log(e.srcElement) 
 
     element.checked = false 
 
    }); 
 
    } 
 
} 
 

 
function amIclicked(e, element) { 
 
    e = e || event; 
 
    var target = e.target || e.srcElement; 
 
    if (target.id == element.id) 
 
    return true; 
 
    else 
 
    return false; 
 
}

#validationModal { 
 
    top: 20%; 
 
} 
 

 
.validationModal-body { 
 
    text-align: center; 
 
    padding: 5%; 
 
} 
 

 
.validationModal-body h2 { 
 
    font-weight: 600; 
 
} 
 

 
.validationModal-body .row { 
 
    padding: 2%; 
 
} 
 

 
.Staf-login__table .row :nth-child(4) { 
 
    text-align: initial; 
 
} 
 

 
.Staf-login__table .row { 
 
    padding: 1% 0; 
 
} 
 

 
@media (max-width: 770px) { 
 
    .voucher-code-checker--go { 
 
    width: 100%; 
 
    padding: 1em; 
 
    text-align: center; 
 
    } 
 
    .btn-purple.go { 
 
    width: 100%; 
 
    } 
 
} 
 

 
.Staff-login__view-more ul { 
 
    list-style-type: none; 
 
    display: flex; 
 
    flex-flow: row; 
 
} 
 

 
.Staff-login__view-more li { 
 
    border: 1px solid #D4D4D4; 
 
    border-radius: 50px; 
 
    padding: 0px 10px; 
 
    font-size: 0.8em; 
 
    margin: 0 2.5px; 
 
} 
 

 
.Staff-login__view-more a { 
 
    color: #4A4A4A; 
 
} 
 

 
.Staff-login__view-more li:hover { 
 
    background: #2D988D; 
 
    color: #fff; 
 
    opacity: 0.5; 
 
} 
 

 
.Staff-login__view-more li.active { 
 
    background: #2D988D; 
 
    color: #fff; 
 
}

<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <script src="../Sass/scripts/jquery-3.2.1.min.js"></script> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <title>Voucher Code Checker</title> 
 
</head> 
 

 
<div class="Staff-login__wrapper"> 
 
    <div class="Staff-login__header"> 
 
    <div class="row flex"> 
 
     <div class="col-xs-10 col-sm-4 col-md-4 Spaced_x-small" id="StaffLogin"> 
 
     <h3>Voucher Code Checker</h3> 
 
     </div> 
 
     <div class="col-sm-0 Spaced_x-small"><a href="#">LOGOUT</a></div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-sm-8 no-padding"> 
 
     <div id="staffLoginIndexSearch" class="col-sm-7"> 
 
      <div class="input-group stylish-input-group"> 
 
      <input type="text" class="form-control" placeholder="Search..."> 
 
      <span class="input-group-addon"> 
 
          <button type="submit"> 
 
           <span class="glyphicon glyphicon-search"></span> 
 
      </button> 
 
      </span> 
 
      </div> 
 
     </div> 
 
     <div class="voucher-code-checker--go col-sm-2"><button class="btn-purple go">Go</button></div> 
 
     </div> 
 

 
     <div class="col-sm-4 Staff-login__create_back--btn"> 
 
     <button class="btn-purple">BACK</button> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
    <!--Staff Login Table--> 
 
    <div class="Staf-login__table Spaced_x-small"> 
 
    <div class="row primary-bg"> 
 
     <div class="col-xs-2 col-sm-2">Name</div> 
 
     <div class="col-xs-2 col-sm-2">Email</div> 
 
     <div class="col-xs-2 col-sm-2">Code</div> 
 
     <div class="col-xs-2 col-sm-4">Validate</div> 
 
     <div class="col-xs-2 col-sm-2">More Details</div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row primary-light-bg"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row primary-light-bg"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row primary-light-bg"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" id="test" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row primary-light-bg"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" id="test2" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <!--View More--> 
 
    <div class="Staff-login__view-more"> 
 
     <ul> 
 
     <a href="#"> 
 
      <li> 
 
      <p> 
 
       <</p> 
 
      </li> 
 
     </a> 
 
     <a href="#"> 
 
      <li class="active"> 
 
      <p>1</p> 
 
      </li> 
 
     </a> 
 
     <a href="#"> 
 
      <li> 
 
      <p>2</p> 
 
      </li> 
 
     </a> 
 
     <a href="#"> 
 
      <li> 
 
      <p>3</p> 
 
      </li> 
 
     </a> 
 
     <a href="#"> 
 
      <li> 
 
      <p>></p> 
 
      </li> 
 
     </a> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
    <!-- Validation Modal --> 
 
    <div id="validationModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="validationModal-body"> 
 
      <h2>Are you sure you want to validate this code?</h2> 
 
      <div class="row"> 
 
      <div class="col-sm-6" style="text-align: right;"><button class="btn-purple" id="validationConfirm">confirm</button></div> 
 
      <div class="col-sm-6" style="text-align: left;"><button class="btn-purple" id="validationCancel">cancel</button></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

出典

2017-10-09 Harry

だから私は.unbind 'イベントハンドラタイプ' でそれを解決しました。積み重ねた以前のイベントを削除

confirm.unbind("click"); 
    cancel.unbind("click");

http://api.jquery.com/unbind/

。しかし、モーダルを強制終了せずにイベントをリセットしなおすことをやり直さなければ、これは機能しません。

//listen for a click on the checkbox 
    var confirm = $('#validationConfirm'); 
    var cancel = $('#validationCancel'); 

    function modalCheck(e, element) { 
     console.log(e.srcElement.checked) 
     //confirm button 
     if (amIclicked(e, element)) { 
      var confirmClick = confirm.click(function() { 

       element.checked = true 
        confirm.unbind("click"); 
        cancel.unbind("click"); 

       //closes modal 
        $(function() { 
         $('#validationModal').modal('toggle'); 
        }); 
      }); 
     } 
     //cancel button 
     if (amIclicked(e, element)) { 
      var cancelClick = cancel.click(function() { 
       element.checked = false 

       confirm.unbind("click"); 
       cancel.unbind("click"); 

       //closes modal 
       $(function() { 
        $('#validationModal').modal('toggle'); 
       }); 
      }); 
     } 
    } 

    function amIclicked(e, element) { 
     e = e || event; 
     var target = e.target || e.srcElement; 
     if (target.id == element.id) 
      return true; 
     else 
      return false; 
    }

：

だから全体的にはこのように見てしまいました

出典

2017-10-09 14:42:55 Harry

jQueryのチェックボックスイベントが累積

答えて

関連する問題