检查是否选中了多个复选框

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

正如 cmets 中所指出的，要准确掌握您的验证需要什么是相当困难的。我的理解是，一旦 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);
   }
});

如果您需要更好的解释，请尝试更具体地验证您的验证