2012年4月18日 星期三

在 jQuery 檢查 checkbox 的點選狀態

用 jQuery 一般要檢查一個 checkbox 是不是有被點選
通常都直接檢查有沒有 checked 屬性,範例如下:
$(function() {
  $("#checkbox").change(changeEventForEnabled);
});

function changeEventForEnabled() {
  if($("#checkbox").attr("checked")) {
    $("#text").removeAttr("disabled");
  }
  else {
    $("#text").attr("disabled", true);
  }
}
上面的目的是當 id="checkbox" 的元件被點選時,會把 id="text" 的欄位開啟(刪除 disabled 屬性)
反之則是把 id="text" 的欄位關閉(刪除 disabled 屬性)

不過在我們的專案中有發生上面的程式碼在 IE8 會出現剛好相反的事件
也就是原本預期被點選時會開啟欄位、取消點選時關閉欄位
在 IE8 會剛好相反,點選時關閉欄位、取消點選時開啟欄位。
同事是說 spin button 的事件被 plugin 換掉了
所以必須要自己重綁 check 跟 uncheck 的事件。
後來改成以下的寫法就好了:
$(function() {
  $("#checkbox").bind("check", checkForEnabled);
  $("#checkbox").bind("uncheck", uncheckForEnabled);
});

function checkForEnabled () {
 $("#text").removeAttr("disabled");
}

function uncheckForEnabled () {
 $("#text").attr("disabled", true);
}

沒有留言: