使用jQuery阻止表单提交失效：多select至少选一项校验

你的代码存在两个核心问题，导致无法正确阻止表单提交：

1. 逻辑判断条件错误 #

原代码中!$(this).val() == ""的写法逻辑错误，无法正确识别下拉框是否选中了有效值。当选中值为"Yes"或"No"时，!$(this).val()会返回false，false == ""的结果也是false，因此永远不会将anySelected设为true；即使选中空值，这个判断同样不成立，最终anySelected始终为false，导致逻辑完全失效。

2. 事件绑定对象不够可靠 #

绑定按钮的click事件只能拦截点击按钮的提交操作，无法覆盖表单可能的其他提交场景（比如输入框回车触发提交），建议直接监听表单的submit事件。

修正后的代码 #

JavaScript 部分

// 监听表单提交事件，覆盖所有提交场景
$('form').submit(function(e) {
    var anySelected = false;
    // 遍历所有class为topic的下拉框
    $(".topic").each(function() {
        // 直接获取下拉框的选中值，判断是否非空
        if ($(this).val() !== "") {
            anySelected = true;
            return false; // 找到一个有效值后立即停止遍历，提升效率
        }
    });
    // 未选中任何有效值时阻止提交
    if (!anySelected) {
        alert("请至少选择一个主题");
        e.preventDefault(); // 阻止表单默认提交行为
        return false;
    }
});

可选方案：继续绑定按钮点击事件 #

如果坚持绑定按钮的click事件，只需修正判断逻辑即可：

$('#MainContent_btnUpdateSample').click(function(e) {
    var anySelected = false;
    $(".topic").each(function() {
        if ($(this).val() !== "") {
            anySelected = true;
            return false;
        }
    });
    if (!anySelected) {
        alert("请至少选择一个主题");
        e.preventDefault();
        return false;
    }
});

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