jQuery复选框保持在屏幕上检查

Question

我的问题是，当我单击其中一个复选框时，它会保持打开（选中），直到屏幕上任意位置再次点击。

然而，事实证明这远离我的完整网页是不可复制的。还有什么可能干扰？哪些检查/控制台日志可能有帮助？

点击ZONE2后，一旦我收到CHECKED，第二次点击它就不会被检查，但是在屏幕上按钮仍然是高亮显示的。当我点击其他地方的屏幕时，Zone2按钮变得不亮。

样式也来自jQueryUI

动态生成HTML

<form id="ZoneButtonsForm">
    <span id="ButtonsetZone1">
         <input type="checkbox" id="ButtonZone1" name="zone1" checked>
         <label for="ButtonZone1">Zone 1</label>
    </span>
    <span id="ButtonsetZone2">
        <input type="checkbox" id="ButtonZone2" name="zone2">
        <label for="ButtonZone2">Zone 2</label>
    </span>
    <span id="ButtonsetZone3">
        <input type="checkbox" id="ButtonZone3" name="zone3">
        <label for="ButtonZone3">Zone 3</label>
    </span>                 
</form>

Js

$( "#ButtonsetZone1").buttonset({
    items: "input[type=checkbox]"
});
$( "#ButtonsetZone2").buttonset({
    items: "input[type=checkbox]"
});
$( "#ButtonsetZone3").buttonset({
    items: "input[type=checkbox]"
});


$(document).on("change", "#ZoneButtonsForm input[type=checkbox]", function () {//event delegation bind
    console.log("the zone button has been clicked");

    $( "#ButtonsetZone1").buttonset("refresh");
    $( "#ButtonsetZone2").buttonset("refresh");
    $( "#ButtonsetZone3").buttonset("refresh");

               if ($("#defIndividualButtonZone1").is(":checked")){
                    console.log("zone 1 is checked");
                }else{
                    console.log("zone 1 is NOT checked");
                }
                if ($("#defIndividualButtonZone2").is(":checked")){
                    console.log("zone 2 is checked");
                }else{
                    console.log("zone 2 is NOT checked");
                }
                if ($("#defIndividualButtonZone3").is(":checked")){
                    console.log("zone 3 is checked");
                }else{
                    console.log("zone 3 is NOT checked");
                }


});