檢查是否選中了多個復選框

Question

我有一個輸入，如果他的值高於 32，我會顯示一個按鈕，單擊時會顯示一個帶有 3 個表的模式，其中每行復選框，我想驗證是否未選中阻止用戶單擊保存按鈕，這里是我的代碼：

 $(document).ready(function() { var vals = $('.valtotal').val(); if (vals > 32) { $('.post-abs').show(); } else { $('.post-abs').hide(); } }) function toggle1(source) { checkboxes = document.getElementsByName('caiet_tabel1[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle2(source) { checkboxes = document.getElementsByName('caiet_tabel2[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle3(source) { checkboxes = document.getElementsByName('caiet_tabel3[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle4(source) { checkboxes = document.getElementsByName('caiet_tabel4[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle5(source) { checkboxes = document.getElementsByName('caiet_tabel5[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle6(source) { checkboxes = document.getElementsByName('caiet_tabel6[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle7(source) { checkboxes = document.getElementsByName('caiet_tabel7[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle8(source) { checkboxes = document.getElementsByName('caiet_tabel8[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle11(source) { checkboxes = document.getElementsByName('caiet_tabel11[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle22(source) { checkboxes = document.getElementsByName('caiet_tabel22[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle33(source) { checkboxes = document.getElementsByName('caiet_tabel33[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle44(source) { checkboxes = document.getElementsByName('caiet_tabel44[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle55(source) { checkboxes = document.getElementsByName('caiet_tabel55[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle66(source) { checkboxes = document.getElementsByName('caiet_tabel66[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle77(source) { checkboxes = document.getElementsByName('caiet_tabel77[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle88(source) { checkboxes = document.getElementsByName('caiet_tabel88[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle111(source) { checkboxes = document.getElementsByName('caiet_tabel111[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle222(source) { checkboxes = document.getElementsByName('caiet_tabel222[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle333(source) { checkboxes = document.getElementsByName('caiet_tabel333[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle444(source) { checkboxes = document.getElementsByName('caiet_tabel444[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle555(source) { checkboxes = document.getElementsByName('caiet_tabel555[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle666(source) { checkboxes = document.getElementsByName('caiet_tabel666[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle777(source) { checkboxes = document.getElementsByName('caiet_tabel777[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } } function toggle888(source) { checkboxes = document.getElementsByName('caiet_tabel888[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } }

 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" value="34" class="valtotal"> <button type="button" data-toggle="modal" data-target="#myModal" class="post-abs btn btn-primary float-left"><i class="fa fa-plus" aria-hidden="true"></i> Multiple</button> <div class="container-fluid"> <button class="btn-save">Save button</button> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg custom-modal"> <!-- Modal content--> <div class="modal-content"> <form class=""> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Multiple caiete de tipar</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-4"> <div class="nr_caiet"> <div class="form-group"> <div class="titlu-caiet"> Nr pag Caietul 1 </div> <input type="text" class="form-control"> </div> </div> <div class="bife_caiet"> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Toate </th> <th scope="col">C</th> <th scope="col">M</th> <th scope="col">Y </th> <th scope="col">K</th> </tr> </thead> <tbody> <tr> <th scope="row">T1F1</th> <td><input type="checkbox" onClick="toggle1(this)"></td> <td><input type="checkbox" name="caiet_tabel1[]"></td> <td><input type="checkbox" name="caiet_tabel1[]"></td> <td><input type="checkbox" name="caiet_tabel1[]"></td> <td><input type="checkbox" name="caiet_tabel1[]"></td> </tr> <tr> <th scope="row">T1F2</th> <td><input type="checkbox" onClick="toggle2(this)"></td> <td><input type="checkbox" name="caiet_tabel2[]"></td> <td><input type="checkbox" name="caiet_tabel2[]"></td> <td><input type="checkbox" name="caiet_tabel2[]"></td> <td><input type="checkbox" name="caiet_tabel2[]"></td> </tr> <tr> <th scope="row">T2F1 </th> <td><input type="checkbox" onClick="toggle3(this)"></td> <td><input type="checkbox" name="caiet_tabel3[]"></td> <td><input type="checkbox" name="caiet_tabel3[]"></td> <td><input type="checkbox" name="caiet_tabel3[]"></td> <td><input type="checkbox" name="caiet_tabel3[]"></td> </tr> <tr> <th scope="row">T2F2 </th> <td><input type="checkbox" onClick="toggle4(this)"></td> <td><input type="checkbox" name="caiet_tabel4[]"></td> <td><input type="checkbox" name="caiet_tabel4[]"></td> <td><input type="checkbox" name="caiet_tabel4[]"></td> <td><input type="checkbox" name="caiet_tabel4[]"></td> </tr> <tr> <th scope="row">T3F1 </th> <td><input type="checkbox" onClick="toggle5(this)"></td> <td><input type="checkbox" name="caiet_tabel5[]"></td> <td><input type="checkbox" name="caiet_tabel5[]"></td> <td><input type="checkbox" name="caiet_tabel5[]"></td> <td><input type="checkbox" name="caiet_tabel5[]"></td> </tr> <tr> <th scope="row">T3F2 </th> <td><input type="checkbox" onClick="toggle6(this)"></td> <td><input type="checkbox" name="caiet_tabel6[]"></td> <td><input type="checkbox" name="caiet_tabel6[]"></td> <td><input type="checkbox" name="caiet_tabel6[]"></td> <td><input type="checkbox" name="caiet_tabel6[]"></td> </tr> <tr> <th scope="row">T4F1 </th> <td><input type="checkbox" onClick="toggle7(this)"></td> <td><input type="checkbox" name="caiet_tabel7[]"></td> <td><input type="checkbox" name="caiet_tabel7[]"></td> <td><input type="checkbox" name="caiet_tabel7[]"></td> <td><input type="checkbox" name="caiet_tabel7[]"></td> </tr> <tr> <th scope="row">T4F2 </th> <td><input type="checkbox" onClick="toggle8(this)"></td> <td><input type="checkbox" name="caiet_tabel8[]"></td> <td><input type="checkbox" name="caiet_tabel8[]"></td> <td><input type="checkbox" name="caiet_tabel8[]"></td> <td><input type="checkbox" name="caiet_tabel8[]"></td> </tr> </tbody> </table> </div> </div> <div class="col-md-4"> <div class="nr_caiet"> <div class="form-group"> <div class="titlu-caiet"> Nr pag Caietul 2 </div> <input type="text" class="form-control"> </div> </div> <div class="bife_caiet"> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Toate </th> <th scope="col">C</th> <th scope="col">M</th> <th scope="col">Y </th> <th scope="col">K</th> </tr> </thead> <tbody> <tr> <th scope="row">T1F1</th> <td><input type="checkbox" onClick="toggle11(this)"></td> <td><input type="checkbox" name="caiet_tabel11[]"></td> <td><input type="checkbox" name="caiet_tabel11[]"></td> <td><input type="checkbox" name="caiet_tabel11[]"></td> <td><input type="checkbox" name="caiet_tabel11[]"></td> </tr> <tr> <th scope="row">T1F2</th> <td><input type="checkbox" onClick="toggle22(this)"></td> <td><input type="checkbox" name="caiet_tabel22[]"></td> <td><input type="checkbox" name="caiet_tabel22[]"></td> <td><input type="checkbox" name="caiet_tabel22[]"></td> <td><input type="checkbox" name="caiet_tabel22[]"></td> </tr> <tr> <th scope="row">T2F1 </th> <td><input type="checkbox" onClick="toggle33(this)"></td> <td><input type="checkbox" name="caiet_tabel33[]"></td> <td><input type="checkbox" name="caiet_tabel33[]"></td> <td><input type="checkbox" name="caiet_tabel33[]"></td> <td><input type="checkbox" name="caiet_tabel33[]"></td> </tr> <tr> <th scope="row">T2F2 </th> <td><input type="checkbox" onClick="toggle44(this)"></td> <td><input type="checkbox" name="caiet_tabel44[]"></td> <td><input type="checkbox" name="caiet_tabel44[]"></td> <td><input type="checkbox" name="caiet_tabel44[]"></td> <td><input type="checkbox" name="caiet_tabel44[]"></td> </tr> <tr> <th scope="row">T3F1 </th> <td><input type="checkbox" onClick="toggle55(this)"></td> <td><input type="checkbox" name="caiet_tabel55[]"></td> <td><input type="checkbox" name="caiet_tabel55[]"></td> <td><input type="checkbox" name="caiet_tabel55[]"></td> <td><input type="checkbox" name="caiet_tabel55[]"></td> </tr> <tr> <th scope="row">T3F2 </th> <td><input type="checkbox" onClick="toggle66(this)"></td> <td><input type="checkbox" name="caiet_tabel66[]"></td> <td><input type="checkbox" name="caiet_tabel66[]"></td> <td><input type="checkbox" name="caiet_tabel66[]"></td> <td><input type="checkbox" name="caiet_tabel66[]"></td> </tr> <tr> <th scope="row">T4F1 </th> <td><input type="checkbox" onClick="toggle77(this)"></td> <td><input type="checkbox" name="caiet_tabel77[]"></td> <td><input type="checkbox" name="caiet_tabel77[]"></td> <td><input type="checkbox" name="caiet_tabel77[]"></td> <td><input type="checkbox" name="caiet_tabel77[]"></td> </tr> <tr> <th scope="row">T4F2 </th> <td><input type="checkbox" onClick="toggle88(this)"></td> <td><input type="checkbox" name="caiet_tabel88[]"></td> <td><input type="checkbox" name="caiet_tabel88[]"></td> <td><input type="checkbox" name="caiet_tabel88[]"></td> <td><input type="checkbox" name="caiet_tabel88[]"></td> </tr> </tbody> </table> </div> </div> <div class="col-md-4"> <div class="nr_caiet"> <div class="form-group"> <div class="titlu-caiet"> Nr pag Caietul 2 </div> <input type="text" class="form-control"> </div> </div> <div class="bife_caiet"> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Toate </th> <th scope="col">C</th> <th scope="col">M</th> <th scope="col">Y </th> <th scope="col">K</th> </tr> </thead> <tbody> <tr> <th scope="row">T1F1</th> <td><input type="checkbox" onClick="toggle111(this)"></td> <td><input type="checkbox" name="caiet_tabel111[]"></td> <td><input type="checkbox" name="caiet_tabel111[]"></td> <td><input type="checkbox" name="caiet_tabel111[]"></td> <td><input type="checkbox" name="caiet_tabel111[]"></td> </tr> <tr> <th scope="row">T1F2</th> <td><input type="checkbox" onClick="toggle222(this)"></td> <td><input type="checkbox" name="caiet_tabel222[]"></td> <td><input type="checkbox" name="caiet_tabel222[]"></td> <td><input type="checkbox" name="caiet_tabel222[]"></td> <td><input type="checkbox" name="caiet_tabel222[]"></td> </tr> <tr> <th scope="row">T2F1 </th> <td><input type="checkbox" onClick="toggle333(this)"></td> <td><input type="checkbox" name="caiet_tabel333[]"></td> <td><input type="checkbox" name="caiet_tabel333[]"></td> <td><input type="checkbox" name="caiet_tabel333[]"></td> <td><input type="checkbox" name="caiet_tabel333[]"></td> </tr> <tr> <th scope="row">T2F2 </th> <td><input type="checkbox" onClick="toggle444(this)"></td> <td><input type="checkbox" name="caiet_tabel444[]"></td> <td><input type="checkbox" name="caiet_tabel444[]"></td> <td><input type="checkbox" name="caiet_tabel444[]"></td> <td><input type="checkbox" name="caiet_tabel444[]"></td> </tr> <tr> <th scope="row">T3F1 </th> <td><input type="checkbox" onClick="toggle555(this)"></td> <td><input type="checkbox" name="caiet_tabel555[]"></td> <td><input type="checkbox" name="caiet_tabel555[]"></td> <td><input type="checkbox" name="caiet_tabel555[]"></td> <td><input type="checkbox" name="caiet_tabel555[]"></td> </tr> <tr> <th scope="row">T3F2 </th> <td><input type="checkbox" onClick="toggle666(this)"></td> <td><input type="checkbox" name="caiet_tabel666[]"></td> <td><input type="checkbox" name="caiet_tabel666[]"></td> <td><input type="checkbox" name="caiet_tabel666[]"></td> <td><input type="checkbox" name="caiet_tabel666[]"></td> </tr> <tr> <th scope="row">T4F1 </th> <td><input type="checkbox" onClick="toggle777(this)"></td> <td><input type="checkbox" name="caiet_tabel777[]"></td> <td><input type="checkbox" name="caiet_tabel777[]"></td> <td><input type="checkbox" name="caiet_tabel777[]"></td> <td><input type="checkbox" name="caiet_tabel777[]"></td> </tr> <tr> <th scope="row">T4F2 </th> <td><input type="checkbox" onClick="toggle888(this)"></td> <td><input type="checkbox" name="caiet_tabel888[]"></td> <td><input type="checkbox" name="caiet_tabel888[]"></td> <td><input type="checkbox" name="caiet_tabel888[]"></td> <td><input type="checkbox" name="caiet_tabel888[]"></td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="modal-footer"> <div class="row"> <div class="col"> <button type="button" class="btn btn-default" data-dismiss="modal">Inchide</button> </div> <div class="col"> <button type="button" value="insert" class="btn btn-success float-right">Salveaza</button> </div> </div> </div> </form> </div> </div> </div>

所以我需要的是，如果值大於 32 顯示按鈕，用於模式和驗證每個復選框，而不是復選框，如果選中，則檢查他的行中的所有復選框。

Answer 1

正如評論中所指出的，很難准確掌握您的驗證需要什么。 我的理解是，一旦 class valtotal的輸入值大於 32，則需要出現一個初始化模態的按鈕。 您可以使用 jquery 來實現這一點：

$(".valtotal").on("keyup", function(){
   if($(".valtotal").val() >32  ){
      $('.post-abs').show();                 
   } else {
      $('.post-abs').hide();
   }                
});

同樣，要檢查是否已選中特定復選框，您可以執行類似的操作：

$('#theCheckBoxId').change(function(){
   if($('#theCheckBoxId').is(':checked')) {
     //Disable the save button
     $("#saveButtonId").prop("disabled", false);
   } else {
     $("#saveButtonId").prop("disabled", true);
   }
});

如果您需要更好的解釋，請嘗試更具體地了解您的驗證