![](/img/trans.png)
[英]how to disable a button if more than one or no checkbox is checked in React JS
[英]How to make button visible after more than one checkbox checked
我有一個表,並且有一個復選框,當我選擇了兩個以上的復選框時,我想要的是我的按鈕應該可見,反之亦然
JavaScript代碼:
$(document).ready(function() {
if ($("input:checkbox:checked").length > 1) {
$("#checkerButton").show();
} else {
$("#checkerButton").hide();
}
});
.PHP
文件:
<div>
<form action="" method="POST" id="checkerDeleter">
<input type="submit" value="Delete Selected" class="btn btn-danger" id="checkerButton" />
</form>
</div>
<table class="table table-hover table-responsive">
<thead>
<tr>
<td>Check</td>
<td>Name</td>
<td>Description</td>
<td>Price</td>
<td>Discount</td>
<td>Quantity</td>
<!--<td>Category</td>-->
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<?php while($row = $resultallproducts->fetch_assoc()) { ?>
<form action="" method="POST">
<tr>
<td><input type="checkbox" name="deleter[]" value="<?php echo $row['product_id']; ?>" /></td>
<td class="hide"><input type="text" name="id" value="<?php echo $row['product_id']; ?>" /></td>
<td><input type="text" name="name" value="<?php echo $row['product_name']; ?>" /></td>
<td><textarea name="desc"><?php echo $row['product_desc'] ?></textarea></td>
<td><input type="text" name="price" value="<?php echo $row['product_price']; ?>" /></td>
<td><input type="text" name="discount" value="<?php echo $row['product_discount']; ?>" /></td>
<td><input type="text" name="quantity" value="<?php echo $row['product_quantity']; ?>" /></td>
<td><input type="submit" name="update" class="btn btn-primary btn-sm" value="Update" /></td>
<td><input type="submit" name="delete" class="btn btn-danger btn-sm" value="Delete" /></td>
</tr>
</form>
<?php } ?>
</tbody>
</table>
</div>
首先,它被禁用,但是當我單擊兩個復選框時,沒有任何反應:\\
使用更改事件來檢查是否選中了2個或更多復選框
$(document).ready(function() { if ($("input:checkbox:checked").length > 1) { $("#checkerButton").show(); } else { $("#checkerButton").hide(); } $("input:checkbox").on("change",function(){ if($("input:checkbox:checked").length > 1){ $("#checkerButton").show(); }else{ $("#checkerButton").hide(); } }); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <form action="" method="POST" id="checkerDeleter"> <input type="submit" value="Delete Selected" class="btn btn-danger" id="checkerButton"/> </form> </div> <table class="table table-hover table-responsive"> <thead> <tr> <td>Check</td> <td>Name</td> <td>Description</td> <td>Price</td> <td>Discount</td> <td>Quantity</td> <!--<td>Category</td>--> <td></td> <td></td> </tr> </thead> <tbody> <form action="" method="POST"> <tr> <td><input type="checkbox" name="deleter[]" value="<?php echo $row['product_id']; ?>"/></td> <td class="hide"><input type="text" name="id" value="<?php echo $row['product_id']; ?>"/></td> <td><input type="text" name="name" value="<?php echo $row['product_name']; ?>"/></td> <td><textarea name="desc"><?php echo $row['product_desc'] ?></textarea></td> <td><input type="text" name="price" value="<?php echo $row['product_price']; ?>"/></td> <td><input type="text" name="discount" value="<?php echo $row['product_discount']; ?>"/></td> <td><input type="text" name="quantity" value="<?php echo $row['product_quantity']; ?>"/></td> <td><input type="submit" name="update" class="btn btn-primary btn-sm" value="Update"/></td> <td><input type="submit" name="delete" class="btn btn-danger btn-sm" value="Delete"/></td> </tr> <tr> <td><input type="checkbox" name="deleter[]" value="<?php echo $row['product_id']; ?>"/></td> <td class="hide"><input type="text" name="id" value="<?php echo $row['product_id']; ?>"/></td> <td><input type="text" name="name" value="<?php echo $row['product_name']; ?>"/></td> <td><textarea name="desc"><?php echo $row['product_desc'] ?></textarea></td> <td><input type="text" name="price" value="<?php echo $row['product_price']; ?>"/></td> <td><input type="text" name="discount" value="<?php echo $row['product_discount']; ?>"/></td> <td><input type="text" name="quantity" value="<?php echo $row['product_quantity']; ?>"/></td> <td><input type="submit" name="update" class="btn btn-primary btn-sm" value="Update"/></td> <td><input type="submit" name="delete" class="btn btn-danger btn-sm" value="Delete"/></td> </tr> </form> </tbody> </table>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.