提姆寫程式

0%

jQuery 筆記 - 使用 JS 動態來啟用/停用元素？

發表於 更新於 分類於 Disqus：
disabled 也可動態增加並控制

switch button

disabled

在 HTML 標籤中有一個 disabled 的屬性，只要在表單元素(Button、Input、Optgroup、Option、Select 及 TextArea )的屬性中加入 disabled 屬性的話，該元素就會被停用了。

直接看範例：

CodePen https://codepen.io/hnzxewqw/pen/YzyoxGx

JS 動態設定

既然是 HTML 的一個屬性，可以使用 jQuery 的 attr(key, value) 來變更 disabled 屬性值即可。有以下幾個寫法可以完成這個設定，

1
2
3
4
5
//寫法 1
$("input").attr("disabled", true);

// 寫法 2：
$("select").attr("disabled", "disabled");

這時用 F12 檢查 HTML 的程式碼，就會出現 disabled="disabled"; 的屬性，反之，要啟動就僵值改成 false，或是用 removeAttr('disabled'); 移除屬性。

1
$("button").removeAttr("disabled");

點擊按鈕使表單元素可以使用

給個情境，有天 PM 跑來說，有個介面一開始客戶要求表單元素都無法使用，點擊一個 NEW 按鈕就可以填入表單，送出按鈕在初始畫面為無法使用，在點擊送出按鈕後又回到初始畫面。

所以畫面的東西都無法使用，那為什麼要做?

獲得資訊有：

  1. 畫面上有表單元素，有 input 跟 button。
  2. 除了 NEW 按鈕外還有一個 submit 的按鈕。
  3. 初始畫面除了 NEW，以外都沒有功能。
  4. 按下 NEW 後，除了 NEW 以外都有功能。

然後就產生下方樣式，

結語

要思考一開始的狀況，再思考判斷按下按鈕會發生的情況，畢竟 JS 是一次只能做一件事的語法，這次遇到的狀況滿有意思的，似乎也在許多頁面上常常看到。

參考文章

[jQ]如何使用 jQuery 來啟用/停用元素？