Javascript:勾選CheckBox並啟用Button按鈕

這是一個蠻常見到的應用,當使用者勾選了已經閱讀/已經同意的確認方框後,才可以去點選某按鈕進行其他的行為動作。這篇文章就是將這個後端的Javascript記錄下來,以後要用到可以馬上提取。

Step 1. 建立按鈕HTML以及CheckBox勾選方框,其中按鈕部分將其預設Disabled。

<button type="button" id="uExport" class="btn btn-lg btn-success" disabled>匯出資料</button>
<input id="uHadRead" type="checkbox" value="1"> 我已閱讀聲明

Step 2. 建立jQuery事件,掛載在CheckBox下。

$(document).ready(function () {
  $("#uHadRead").click(function () {
    $("#uExport").prop("disabled", !$("#uHadRead:checked").length);
  });
});

範例展示

勾選「我已閱讀聲明」,匯出資料的按鈕就會啟動讓使用者點選。

我已閱讀聲明 Javascript HTML CheckBox Checked Enable Disable Button