这个逻辑的目标是: -
问题是,当单击多个复选框时,它们共享相同的事件,您单击的次数越多,受影响的越多。我已经尝试了各种解决方案来尝试让点击事件仅影响该特定复选框,尽管我没有幸运获得最后一点。
我真的很感激任何帮助!
//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>
&#13;
答案 0 :(得分:0)
所以我用.unbind'事件处理程序类型'解决了它。
confirm.unbind("click");
cancel.unbind("click");
删除了以前堆叠的事件。但是,如果没有强制模式关闭并重置事件以重新开始,则不起作用。
总的来说,它最终看起来像这样:
//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;
}