用 jQuery 控制 button 的 enabled/disabled demo

程式目的 : 當使用者了按 checkbox 後, 才讓 delete button 啟用. 當使用者取消 checkbox 後, 將 delete button 停用.

html 程式碼如下 :

1
2
3
4
5
6
7

(omit)...
<input type="submit" id="delete" name="action" value="Delete users" disabled>
(omit)...
<input type="checkbox" name="uid[]" value="samtseng" onclick="enableAction();">
(omit)...
<input type="checkbox" name="uid[]" value="harrytseng" onclick="enableAction();">
(omit)...

用 jQuery 檢查每個 checkbox 是否被選取. 然後設定 button enabled/disabled. 🙂
javascript 程式碼如下 :

1
2
3
4
5
6
7
8
9
10
11
12
13

  function enableAction() {
    flag = false;
    $("input[type=checkbox][checked]").each(
      function() {
        flag = true;
      }
    );
    if (flag) {
      $("#delete").attr("disabled", false);
    } else {
      $("#delete").attr("disabled", true);
    }
  } // end function enableAction()

按這裡看DEMO.