making sure all checkboxes are checked when button is pressed

August 15, 2023

I am looking to validate all checkboxes which are shown in the model dialog when a user clicks on the Agreed button.

Here’s my code:

$( function() {
    $( "#dialog-confirm" ).dialog({
      resizable: true,
      height: "auto",
      width: "80%",
      modal: true,
      title:"Select everything",
        classes: {
        'ui-dialog':'my-custom-dialog'
      },
      buttons: {
        "Agreed": function() {
          $( this ).dialog( "close" );
          var countCheckBoxes = 0;

          var countCheckBoxesSelected = 0;
          for (i = 0; i < document.forms[0].elements.length; i++) {
          if (document.forms[0].elements[i].type == 'checkbox') {
          countCheckBoxes++;
              if (document.forms[0].elements[i].checked) {
              countCheckBoxesSelected++;
              }
            }
          }

          if (countCheckBoxes == countCheckBoxesSelected) {
            alert("OK - to save");
            } else {
            alert("All checkboxes must be checked first.");
          }
},
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  } );

.ui-dialog.my-custom-dialog {
  left:0!important;
  right:0!important;
  margin:auto;
}

.ui-dialog.my-custom-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{
  float:none;
  display:flex;
  justify-content:space-between;
}

<!doctype html>
<html lang="en">
<head>
   <title>jQuery UI Dialog - Modal confirmation</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
 <script>
  
  </script>
</head>
<body>
 
<div id="dialog-confirm" >
 
  <input type="checkbox" id="check1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>
</div>
 
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
 
 
</body>
</html>

But the solution that I was testing inside the Agreed button can’t be used here as I can’t use form here since my dialog code is already inside a form (not shown here) with other checkboxes on the form. So I’m looking for a way to make sure all checkboxes are checked once user hits Agreed button.

>Solution :

You have the $("#dialog-confirm") selector, you just need to save that as a variable and then look for checkboxes inside of that. Also jQuery selectors make minding checkboxes and checked checkboxes pretty easy, so you can take advantage of that instead of doing loops.

$(function() {
  const $dialogConfirm = $("#dialog-confirm");
  const $checkboxes = $dialogConfirm.find(":checkbox");
  
  $dialogConfirm.dialog({
    resizable: true,
    height: "auto",
    width: "80%",
    modal: true,
    title:"Select everything",
      classes: {
      'ui-dialog':'my-custom-dialog'
    },
    buttons: {
      "Agreed": function() {
        const $checkedCheckboxes = $checkboxes.filter(":checked")

        if ($checkboxes.length === $checkedCheckboxes.length) {
          console.log("OK - to save");
          $dialogConfirm.dialog("close");
        } else {
          console.log("All checkboxes must be checked first.");
        }
      },
      Cancel: function() {
        $dialogConfirm.dialog("close");
      }
    }
  });
});

.ui-dialog.my-custom-dialog {
  left:0!important;
  right:0!important;
  margin:auto;
}

.ui-dialog.my-custom-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{
  float:none;
  display:flex;
  justify-content:space-between;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div id="dialog-confirm" >
 
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>
</div>
 
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>