javascript - 复选框不能取消选中

Question

我目前正在尝试用我的 jquery 和我的 html 表单解决问题。

问题:我有一个复选框，允许人们勾选接受或不接受条款和条件。此复选框由名为 validateAccept() 的 jquery 函数验证。但是，在我插入 if valid return true 并且 if not valid return false 之后，复选框对点击没有反应。我是 jquery 的初学者。我不确定哪一部分出了问题。

我的 HTML 代码:

<form action="<? echo $filename; ?>" id="acceptanceForm" name="acceptanceForm" method="post">
  <p>Terms and conditions.......</p>
  I ACCEPT THE TERMS AND CONDITIONS
  <input type="checkbox" name="accept" id="accept" value="yes"/>
  <span id="acceptInfo" class="inputInfo"></span>
</form>

我的 jQuery 验证代码:

$(document).ready(function(){

//Validation (TERMSANDCONDITION)
//termsandconditions variables
var acceptanceForm = $("#acceptanceForm");
var accept = $("#accept");
var acceptInfo = $("#acceptInfo");

//Trigger validation
//On blur
accept.click(validateAccept);
//On key press
accept.keyup(validateAccept);
//On submit
acceptanceForm.submit(function () {
    if (validateAccept()) 
        return true
    else 
        return false;
});

//Validation
//validate accept

function validateAccept() {
    var isChecked = $('#accept').is(':checked');
    if (isChecked) {
        accept.removeClass("error");
        acceptInfo.text("Thanks");
        acceptInfo.removeClass("error");
        acceptInfo.removeClass("inputInfo");
        acceptInfo.addClass("validated");
        return true;
    } else {
        accept.addClass("error");
        acceptInfo.text("Please Read and Accept the Terms and Conditions");
        acceptInfo.removeClass("inputInfo");
        acceptInfo.removeClass("validated");
        acceptInfo.addClass("error");
        return false;
    }
}

我所知道的:我知道问题出在我添加的 return true 和 return false 上。我在没有它们的情况下尝试在 JS Fiddle 上，并且复选框有效但表单无效。因此，我知道 return true 和 false 是必要的，但我真的不知道我应该如何整理它们以使其工作。我做了一些研究并意识到与我相似的小案例。这种验证技术应该适用于文本输入，所以我不确定我编辑它的方式是否适用于复选框。

JSFiddle

Answer 1

问题是在点击处理程序中返回 false 会阻止默认行为。如果您需要在这两种情况下都使用它，但忽略点击处理程序的返回值，您可以这样做:

accept.click(function(){
    validateAccept();
});

http://jsfiddle.net/8JdRb/1/

在这种情况下，点击处理函数没有返回值，也不会影响复选框的功能。