2012-06-27 106 views
3

我正在使用複選框在註冊表單上切換某些多列表的已啓用和已禁用狀態。該複選框標有該類別,並且多列表包含屬於該類別的項目。jQuery - 未選中複選框

我正在使用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實際數據添加到處理腳本的任何想法?

謝謝你們。

+0

爲什麼不使用控制複選框的默認瀏覽器的行爲? – TNC

回答

4

的問題是使用toggle - 每the documentation

的實施也對事件調用.preventDefault(),所以鏈接 不會遵循和按鈕不會被點擊,如果.toggle ()已在元素上調用 。

toggle本身呼喚preventDefault,這是阻止事件的默認行爲,檢查/取消勾選框。

而不是切換,使用bindon見下文編輯注)添加一個偵聽器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'); 
    } 
}); 

Try it out at jsFiddle

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

文檔

+1

請注意,從jQuery 1.7開始,您應該使用.on方法綁定事件:http://api.jquery.com/on/。您會注意到綁定文檔第一段中提到的這一點。 –

+0

謝謝!我實際上並沒有使用jQuery,所以這是一個有用的筆記。編輯答案表明這一點。 –

+0

謝謝Chris和Sam!我經常沒有太多的例子可以使用jQuery,只是來自1.4.4版本,所以這是一個漸進式的追趕遊戲,讓我瞭解一些更好的東西是如何工作的,以及如何改變一切。感謝幫助。 – relativelycoded