我在表单中有一张表，我用它来支付发票。在每个表行上都有一个复选框和一个文本输入。当用户单击该复选框时，它会使用发票余额填充文本输入。
在某些情况下，用户将单击该复选框并填充文本输入，如上所述。但是，用户可以决定他们不想在该发票上支付全部余额。因此，他们可以将文本输入的值更改为小于余额的任何金额。当用户执行此操作时，我想取消选中该复选框。
P.S。请注意，此处使用了icheck插件，因此使用了ifChecked事件。
$(function() {
var payFull = $('input[type="checkbox"].payfull');
var payNow = $('input[type="text"].paynow');
var payAmt = $('#amounttopay');
// Recalc Function
function reCalc() {
var sum = 0;
payNow.each(function() {
sum += Number($(this).val());
});
if (!isNaN(sum) && sum.length !== 0) {
payAmt.html('$' + sum.toFixed(2));
} else {
payAmt.html('$0.00');
}
}
// When Pay in Full Checkbox is Checked fill in Pay This Time Field with Invoice Amount Due Value
payFull.on('ifChecked', function(event) {
var val = $(this).val().replace('$', '');
var price = $(this).closest('tr').find('input[type="text"]').val(val);
price;
reCalc;
});
// If Pay in Full Unchecked then remove value from respective Pay This Time Input
payFull.on('ifUnchecked', function(event) {
var removePrice = $(this).closest('tr').find(payNow).val('');
removePrice;
reCalc;
});
// If Pay This Time changes recalculate total
var payFullVal = payFull.val().replace('$', '');
var payNowVal = payNow.val();
payNow.keyup(function() {
reCalc;
if (payFullVal !== payNowVal) {
$(this).closest('tr').find('input').iCheck('uncheck');
} else {}
});
});/* iCheck plugin Square skin, blue
----------------------------------- */
.icheckbox_square-blue,
.iradio_square-blue {
display: inline-block;
*display: inline;
vertical-align: middle;
margin: 0;
padding: 0;
width: 22px;
height: 22px;
background: url(https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/skins/square/blue.png) no-repeat;
border: none;
cursor: pointer;
}
.icheckbox_square-blue {
background-position: 0 0;
}
.icheckbox_square-blue.hover {
background-position: -24px 0;
}
.icheckbox_square-blue.checked {
background-position: -48px 0;
}
.icheckbox_square-blue.disabled {
background-position: -72px 0;
cursor: default;
}
.icheckbox_square-blue.checked.disabled {
background-position: -96px 0;
}
.iradio_square-blue {
background-position: -120px 0;
}
.iradio_square-blue.hover {
background-position: -144px 0;
}
.iradio_square-blue.checked {
background-position: -168px 0;
}
.iradio_square-blue.disabled {
background-position: -192px 0;
cursor: default;
}
.iradio_square-blue.checked.disabled {
background-position: -216px 0;
}
/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.icheckbox_square-blue,
.iradio_square-blue {
background-image: url(blue@2x.png);
-webkit-background-size: 240px 24px;
background-size: 240px 24px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/icheck.min.js"></script>
<script>
$(function() {
$('#datatable input[type=checkbox]').iCheck({
checkboxClass: 'icheckbox_square-blue',
increaseArea: '10%' // optional
});
});
</script>
<table class="table table-bordered" id="datatable">
<thead>
<tr>
<th class="text-center view">View</th>
<th class="text-center">Invoice Date</th>
<th class="text-center">Invoice #</th>
<th class="text-center">PO #</th>
<th class="text-center">Invoice Amount</th>
<th class="text-center">Amount Due</th>
<th class="text-center">Pay In Full</th>
<th class="text-center">Pay This Time</th>
</tr>
</thead>
<tfoot>
<tr class="foot">
<th class="text-left">
<h5 class="semibold text-uppercase nm ml5">Pay This Time</h5>
</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="text-right">
<h3 class="semibold nm mr5" id="amounttopay">$0.00</h3>
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td class="text-center">
<label>
<input class="view-detail" data-contextual="selected" data-target="tr" data-toggle="selectrow" name="SPI_Inv_Select" type="checkbox" value="SPI_Inv_Num">
</label>
</td>
<td class="text-center">SPI_Inv_Date</td>
<td class="text-center"><a class="uline" href='#'>SPI_Inv_Num</a>
</td>
<td class="text-center">SPI_Inv_PONum</td>
<td class="text-right">SPI_Inv_Amt</td>
<td class="text-right">SPI_Inv_DueAmt</td>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="$109.92">
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text">
</div>
<span class="one"></span>
</td>
</tr>
<tr>
<td class="text-center view">
<label>
<input class="view-detail" data-contextual="selected" data-target="tr" data-toggle="selectrow" name="SPI_Inv_Select" type="checkbox" value="SPI_Inv_Num">
</label>
</td>
<td class="text-center">SPI_Inv_Date</td>
<td class="text-center"> <a class="uline" href='#'>SPI_Inv_Num</a>
</td>
<td class="text-center">SPI_Inv_PONum</td>
<td class="text-right">SPI_Inv_Amt</td>
<td class="text-right">SPI_Inv_DueAmt</td>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="$6.65">
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text">
</div>
<span class="two"></span>
</td>
</tr>
</tbody>
</table>
解释发生的事情： 当我单击复选框并修改文本输入值时，将取消选中所有复选框。我想要取消选中与修改后的文本输入相同的表行上的复选框。
答案 0 :(得分：1)
这是我发现的工作。
$('.paynow').keyup(function() {
if (payFullVal !== $(this).val()) {
$(this).closest('tr').find('input.payfull').iCheck('uncheck');
} else {}
});
答案 1 :(得分：0)
请参阅上面的代码段以获取解决方案。我在keyup函数上有不正确的选择器，因此我的范围已关闭。