jquery - 验证消息被过早触发

Question

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

我的代码

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>

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

Answer 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();
   } 
});

在此处查看工作演示

Answer 2

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

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

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

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

Answer 3

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

    } else {
        alert('Not checked');

    }
});

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

演示

Answer 4

change由于在页面 load.use事件期间没有触发 Event 的条件

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

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