javascript - bootstrap checkbox-x 在选中时未正确更新 DOM - 如何验证表单？

Question

我正在使用Kartik Visweswaran's bootstrap styled checkboxes因为我需要在我的网络应用程序上为平板电脑/手机用户提供大的简易盒子。这是典型的盒子的样子:

<div class="checkbox">
    <input id="check1"
            name="option1" 
            type="checkbox" 
            value="0"
            class="checkbox" 
            data-toggle="checkbox-x" 
            data-three-state="false" 
            data-size="lg">
    <label>$this->cut</label>
</div>

请注意，input 标签未嵌套在 label 标签之间(这会搞砸屏幕阅读器吗？这是一个错误吗？)。如果嵌套，复选框-x 不会切换。您可以通过使用下面的 jsfiddle 来验证此行为。

我正在验证至少有一个复选框已选中，如下所示:

function check_checkboxes(checkboxes) {
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
            alert("at least one checkbox is checked");
            return true;
        }
    }
    //if no checkboxes were checked, return false
    return false;
}
$("#submit_button").click( function(e){
    if(!(check_checkboxes($(".checkbox")))){
        //if no checkboxes are checked, warn
        alert("No checkboxes checked.");
});

我知道输入检查状态与 DOM 检查状态问题 described in this question here ，但 jquery .checked 方法似乎正在验证检查状态，如 this fiddle that I created. DOM 更新为与框的真实选中状态相反的状态(即 here's a firebug screenshot of a box when it's checked )。这个你自己验证一下吧!我猜这是一个错误？

所以问题是:如何验证至少有一个 checkbox-x 已使用 javascript 进行了检查，而这种方式没有太多的 Frankencode，其作用与它的含义相反？或者有没有更好的方法来获得大复选框(如 jquery-ui)？我试图避免使用表单验证规则，因为它不太适合我正在创建的复杂表单和警告警报的呈现。

Answer 1

在尝试了其他一些库之后，我喜欢 checkBo 。这是working fiddle ，是的，它确实正确更新了 DOM。

HTML

<div>
    <form action="#" method="post">
        <label class="cb-checkbox cb-md">
            <input id="check1" type="checkbox" class="checkbox" name="option1" value="0" />Option 1</label>
        <label class="cb-checkbox cb-md">
            <input id="check2" type="checkbox" class="checkbox" name="option2" value="0" />Option 2</label>
        <label class="cb-checkbox cb-md">
            <input id="check3" type="checkbox" class="checkbox" name="option3" value="0" />Option 3</label>
    </form>
</div>
<button id="submit_button" type="button" class="btn btn-success">Submit</button>

JS

$checkboxes = $("input.checkbox");
$(document).ready(function () {
    $("form").checkBo();
});

function check_checkboxes(checkboxes) {
    if (checkboxes !== null) {
        alert("checkboxes are not null, length = " + checkboxes.length);
    } else {
        alert("null checkbox list");
    }
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
            //        if (checkboxes[i].is(":checked")) {
            alert("return true");
            return true;
        }
    }
    alert("return false");
    return false;
}

$("#submit_button").click(function (e) {
    if (!(check_checkboxes($checkboxes))) {
        e.preventDefault();
        alert("no checkboxes are checked");
    } else {
        alert("at least one checkbox is checked");
    }
});