jQuery - 未選中復選框

Question

我正在使用復選框來切換注冊表單上某些多列表的啟用和禁用狀態。 該復選框標有類別，多列表包含屬於該類別的項目。

我正在使用jQuery 1.7.2。

        $('#sch_cat_hockeyschools').toggle(function(ev) {
                ev.stopPropagation();
                $("#type_select_hockeyschools").prop("disabled", false);
                $("#type_select_hockeyschools").removeProp("disabled", "disabled");
                $("#sch_cat_hockeyschools").prop("checked", true);
                $("#sch_cat_hockeyschools").prop("checked", "checked");
            }, function(ev) {
                ev.stopPropagation();
                $("#type_select_hockeyschools option:selected").removeAttr("selected");
                $("#type_select_hockeyschools").prop("disabled", true);
                $("#type_select_hockeyschools").prop("disabled", "disabled");
                $("#sch_cat_hockeyschools").prop("checked", false);
                $("#sch_cat_hockeyschools").removeProp("checked");
            });

相應復選框HTML的示例：

<input class="catmark" type="checkbox" name="sch_categories[]" id="sch_cat_hockeyschools" value="1" />General Hockey Schools
<input class="catmark" type="checkbox" name="sch_categories[]" id="sch_cat_springhockey" value="2" />Spring Hockey

問題是，單擊復選框后，復選框不會被勾選或選中; 它會立即返回到未經檢查的狀態，我認為stopPropagation()函數會有所幫助。 顯然不是。 按預期啟用和禁用多列表，但不勾選復選框。

此問題的結果是，在提交表單時，包含所選類別的數組為空; 因此，因為至少有一個已檢查的類別是表單中的必填字段，處理表單的PHP腳本會拋出我的一個錯誤，告訴我必填字段留空。

關於如何確保復選框實際被檢查的任何想法，以及通過擴展，POSTS實際數據到處理腳本？

多謝你們。

Answer 1

問題是使用toggle - 根據文檔 ：

該實現還在事件上調用.preventDefault（），因此如果在元素上調用了.toggle（），則不會遵循鏈接並且不會單擊按鈕。

toggle本身就是調用preventDefault ，它會停止事件的默認行為，檢查/取消選中該框。

而不是切換，使用bind或on （ 請參閱下面的編輯說明 ）為change事件添加一個偵聽器，您可以在其中檢查狀態：

$('#sch_cat_hockeyschools').on('change', function () {
    if (this.checked) {
        // do stuff for a checked box   
        console.log('check is on');
    } else {
        // do stuff for an unchecked box        
        console.log('check is off');
    }
});

在jsFiddle嘗試一下 。

編輯請注意，此代碼顯示使用on方法，而jsFiddle示例使用bind 。 正如Sam Sehnert所指出的， on是使用> jQuery 1.7附加事件的首選方法。 如果您使用的是舊版本的jQuery，請在jsFiddle示例中使用bind 。

文檔

• jQuery.toggle
• jQuery.bind
• jQuery.on