验证消息被过早触发[关闭]答案

【问题标题】：Validation message is prematurely triggered [closed]验证消息被过早触发[关闭]
【发布时间】：2013-07-20 11:17:31
【问题描述】：

我有以下代码，我想要它，这样如果我取消选中该复选框，它将显示验证消息。

我的代码

jQuery

if($('#TermsAndConditions').is(':checked')) 
{
} else {
    alert('Not checked);
}

查看

<div class="editor-field">
    <%:Html.CheckBox("TermsAndConditions")%> <%: Html.ActionLink("I agree Terms and Conditions", "Terms", "Home")%>
</div>

但是，每当我加载表单时，都会显示一条警告消息。你能帮我找出问题吗？

【问题讨论】：

因为它没有绑定到任何事件。每当表单/页面加载时，都会触发警报。您需要将其绑定为 submit 之类的事件。
如果不将代码设置在复选框的 onchange 处理程序中，您希望您的代码做什么？！
jquery-validate 标签用于特定插件。标记问题时请更加小心。已编辑。谢谢。

标签： jquery validation checkbox

【解决方案1】：

这是因为您将脚本放置在页面顶部。本质上，您的脚本是在 #TermsAndCondition 复选框存在于范围内之前加载的，因此它不符合您的条件并触发 else，并且它也不是由可能不希望出现的事件（例如表单提交或复选框状态更新）触发的。

您应该在触发事件时执行操作，例如当复选框状态更改时。

$("#TermsAndConditions").on("change", function(){
   if($(this).is(':checked')) 
   {
   } else {
       alert("Not checked");
   } 
});

或者当表单提交时

$("#YourFormId").on("submit", function(e){
   if($("#TermsAndConditions").is(':checked')) 
   {
       // Form will submit
   } else {
       // Form will not submit
       alert("Not checked");
       e.preventDefault();
   } 
});

See working demo here

【讨论】：

你可以在 onchange 处理程序中使用$(this)
@roasted 没错，我已经更新了。谢谢

【解决方案2】：

您将 jquery 代码放在哪里？您确定它在页面完全加载后运行吗？您可能需要像这样将其放入$(function(){ .. code .. });：

$(function(){
    if($('#TermsAndConditions').is(':checked')) {

    }
    else {
       alert('Not checked);
    }
});

或者像@Duk 说的绑定它来提交事件。

【讨论】：

【解决方案3】：

$('#TermsAndConditions').on('change', function () {
    if (this.checked) {

    } else {
        alert('Not checked');

    }
});

或您希望提交的任何其他处理程序，例如

DEMO

【讨论】：

【解决方案4】：

由于在页面加载期间没有触发事件的条件。使用change事件

 $(document).ready(function(){
    $('#TermsAndConditions').change(function(){
            if($(this).is(':checked')) {

            }
            else {
               alert('Not checked);
            }
        });
  });

【讨论】：

正如 OP 所说，警报已经显示，所以这显然不是这里的问题
在这种情况下，onchange 事件会更好，因为某些浏览器（较旧？）会在复选框状态更改之前触发点击事件，从而导致未预期的结果
@roasted 你是对的因为点击不是复选框的事件..再次感谢更新 ans