如果 checkbox.checked > 0 在 asp mvc 中使用 js/jquery 如何启用按钮?
How to enable a button if checkbox.checked > 0 using js/jquery in asp mvc?
这是我的 html 标记
<form action="/SessionCart/AddToSession" method="post">
<table class="table">
<tr>
<th>
</th>
<th>
Foo
</th>
</tr>
<tr>
<td>
<input data-val="true" data-val-number="The field SessionId must be a number." data-val-required="The SessionId field is required." name="[0].SessionId" type="hidden" value="1" />
<input data-val="true" data-val-required="The isSelected field is required." name="[0].isSelected" type="checkbox" value="true" /><input name="[0].isSelected" type="hidden" value="false" />
</td>
<td>
A
</td>
</tr>
<tr>
<td>
<input data-val="true" data-val-number="The field SessionId must be a number." data-val-required="The SessionId field is required." name="[1].SessionId" type="hidden" value="8" />
<input data-val="true" data-val-required="The isSelected field is required." name="[1].isSelected" type="checkbox" value="true" /><input name="[1].isSelected" type="hidden" value="false" />
</td>
<td>
B
</td>
</tr>
</table>
<button id="addToCart" type="submit" class="btn btn-success">Add To Cart</button>
</form>
这是我的 javascript 启用或禁用按钮,但我想仅在至少选中一个复选框时启用?
我想确保至少选中一个复选框以启用该按钮。
<script type="text/javascript">
if () {
$("#addToCart").attr("disabled", "disabled");
} else {
$("#addToCart").removeAttr("disabled");
}
</script>
您可以发现复选框已选中
$('#mytable').find('input[type="checkbox"]:checked'){
$("#addToCart").attr("disabled", "disabled");
});
或更普遍
$('table [type="checkbox"]').each(function(i, chk) {
if (chk.checked) {
$("#addToCart").attr("disabled", "disabled");
}
else{
$("#addToCart").removeAttr("disabled");
});
我建议采用以下方法:
// disable the 'addToCart' <button> via jQuery
// (or plain JavaScript) to ensure that the button
// works in the (increasingly unlikely) event that
// JavaScript is disabled:
$('#addToCart').prop('disabled', true);
// select the <input> elements, whose type is equal to checkbox
// within the <table> element with a class of 'table';
// bind the anonymous function of the on() method as the
// event-handler for the 'change' event:
$('table.table input[type=checkbox]').on('change', function() {
// here we find the number of checkboxes within the closest
// ancestor <table> element that are checked, and see if the
// number of checked elements is exactly equal to zero:
let checked = $(this).closest('table').find('input[type=checkbox]:checked').length === 0;
// we update the 'disabled' property to 'true' if the
// number of checked checkboxes is exactly zero; and
// to false if the number is not exactly equal to zero:
$('#addToCart').prop('disabled', checked);
});
$('#addToCart').prop('disabled', true);
$('table.table input[type=checkbox]').on('change', function() {
let checked = $(this).closest('table').find('input[type=checkbox]:checked').length === 0;
$('#addToCart').prop('disabled', checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<th>
</th>
<th>
Foo
</th>
</tr>
<tr>
<td>
<input data-val="true" data-val-number="The field SessionId must be a number." data-val-required="The SessionId field is required." name="[0].SessionId" type="hidden" value="1" />
<input data-val="true" data-val-required="The isSelected field is required." name="[0].isSelected" type="checkbox" value="true" /><input name="[0].isSelected" type="hidden" value="false" />
</td>
<td>
A
</td>
</tr>
<tr>
<td>
<input data-val="true" data-val-number="The field SessionId must be a number." data-val-required="The SessionId field is required." name="[1].SessionId" type="hidden" value="8" />
<input data-val="true" data-val-required="The isSelected field is required." name="[1].isSelected" type="checkbox" value="true" /><input name="[1].isSelected" type="hidden" value="false" />
</td>
<td>
B
</td>
</tr>
</table>
<button id="addToCart" type="submit" class="btn btn-success">Add To Cart</button>
这是我的 html 标记
<form action="/SessionCart/AddToSession" method="post">
<table class="table">
<tr>
<th>
</th>
<th>
Foo
</th>
</tr>
<tr>
<td>
<input data-val="true" data-val-number="The field SessionId must be a number." data-val-required="The SessionId field is required." name="[0].SessionId" type="hidden" value="1" />
<input data-val="true" data-val-required="The isSelected field is required." name="[0].isSelected" type="checkbox" value="true" /><input name="[0].isSelected" type="hidden" value="false" />
</td>
<td>
A
</td>
</tr>
<tr>
<td>
<input data-val="true" data-val-number="The field SessionId must be a number." data-val-required="The SessionId field is required." name="[1].SessionId" type="hidden" value="8" />
<input data-val="true" data-val-required="The isSelected field is required." name="[1].isSelected" type="checkbox" value="true" /><input name="[1].isSelected" type="hidden" value="false" />
</td>
<td>
B
</td>
</tr>
</table>
<button id="addToCart" type="submit" class="btn btn-success">Add To Cart</button>
</form>
这是我的 javascript 启用或禁用按钮,但我想仅在至少选中一个复选框时启用? 我想确保至少选中一个复选框以启用该按钮。
<script type="text/javascript">
if () {
$("#addToCart").attr("disabled", "disabled");
} else {
$("#addToCart").removeAttr("disabled");
}
</script>
您可以发现复选框已选中
$('#mytable').find('input[type="checkbox"]:checked'){
$("#addToCart").attr("disabled", "disabled");
});
或更普遍
$('table [type="checkbox"]').each(function(i, chk) {
if (chk.checked) {
$("#addToCart").attr("disabled", "disabled");
}
else{
$("#addToCart").removeAttr("disabled");
});
我建议采用以下方法:
// disable the 'addToCart' <button> via jQuery
// (or plain JavaScript) to ensure that the button
// works in the (increasingly unlikely) event that
// JavaScript is disabled:
$('#addToCart').prop('disabled', true);
// select the <input> elements, whose type is equal to checkbox
// within the <table> element with a class of 'table';
// bind the anonymous function of the on() method as the
// event-handler for the 'change' event:
$('table.table input[type=checkbox]').on('change', function() {
// here we find the number of checkboxes within the closest
// ancestor <table> element that are checked, and see if the
// number of checked elements is exactly equal to zero:
let checked = $(this).closest('table').find('input[type=checkbox]:checked').length === 0;
// we update the 'disabled' property to 'true' if the
// number of checked checkboxes is exactly zero; and
// to false if the number is not exactly equal to zero:
$('#addToCart').prop('disabled', checked);
});
$('#addToCart').prop('disabled', true);
$('table.table input[type=checkbox]').on('change', function() {
let checked = $(this).closest('table').find('input[type=checkbox]:checked').length === 0;
$('#addToCart').prop('disabled', checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<th>
</th>
<th>
Foo
</th>
</tr>
<tr>
<td>
<input data-val="true" data-val-number="The field SessionId must be a number." data-val-required="The SessionId field is required." name="[0].SessionId" type="hidden" value="1" />
<input data-val="true" data-val-required="The isSelected field is required." name="[0].isSelected" type="checkbox" value="true" /><input name="[0].isSelected" type="hidden" value="false" />
</td>
<td>
A
</td>
</tr>
<tr>
<td>
<input data-val="true" data-val-number="The field SessionId must be a number." data-val-required="The SessionId field is required." name="[1].SessionId" type="hidden" value="8" />
<input data-val="true" data-val-required="The isSelected field is required." name="[1].isSelected" type="checkbox" value="true" /><input name="[1].isSelected" type="hidden" value="false" />
</td>
<td>
B
</td>
</tr>
</table>
<button id="addToCart" type="submit" class="btn btn-success">Add To Cart</button>