近日在使用jQuery開發頁面時,遇到了一個奇怪的問題。在使用.disabled()方法將一個按鈕設置為不可用的時候,頁面上的按鈕卻并沒有變灰,反而還是可以點擊的。
經過一番排查,發現是因為該按鈕的樣式設置不允許其被禁用。具體而言,是因為該按鈕的CSS樣式里面含有以下代碼:
button { pointer-events: none; }
pointer-events屬性可以指定元素是否允許鼠標事件的發生,none表示不允許。而禁用按鈕實際上就是要禁止鼠標事件的發生,所以當該屬性值被設置為none后,按鈕是不允許被禁用的。
在這種情況下,解決方法也很簡單。可以在CSS樣式中增加如下代碼:
button[disabled] { pointer-events: auto; }
這樣就可以讓按鈕在被禁用時也能夠顯示禁用狀態了。