点击Agreed按钮时验证模态对话框内所有复选框的实现问询

原代码的问题在于遍历了整个表单的所有复选框，当对话框嵌套在包含其他复选框的表单中时，会误统计外部的复选框。我们可以通过精准定位对话框内的复选框来解决这个问题，具体修改如下：

修改后的JavaScript代码 #

$(function() {
    $("#dialog-confirm").dialog({
        resizable: true,
        height: "auto",
        width: "80%",
        modal: true,
        title: "Select everything",
        classes: {
            'ui-dialog': 'my-custom-dialog'
        },
        buttons: {
            "Agreed": function() {
                // 仅获取对话框内的复选框
                const dialogCheckboxes = $('#dialog-confirm input[type="checkbox"]');
                const totalCheckboxes = dialogCheckboxes.length;
                const checkedCheckboxes = dialogCheckboxes.filter(':checked').length;

                if (totalCheckboxes === checkedCheckboxes) {
                    alert("OK - to save");
                    $(this).dialog("close"); // 验证通过才关闭对话框
                } else {
                    alert("All checkboxes must be checked first.");
                    // 不关闭对话框，让用户继续勾选
                }
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        }
    });
});

关键改动说明 #

• 精准选择器：使用$('#dialog-confirm input[type="checkbox"]')仅选中对话框内的复选框，完全不受表单内其他复选框影响
• 逻辑顺序调整：先完成验证，只有当所有复选框都勾选时才关闭对话框，否则保留对话框让用户修正
• 简化计数逻辑：利用jQuery的length和filter(':checked')方法快速统计总数和已勾选数量，替代原生循环，代码更简洁易维护

完整代码示例 #

HTML #

<!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>
</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 rutrum convallis. 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>

CSS #

.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;
}

内容的提问来源于stack exchange，提问作者Tan