在網頁設計中,有時需要讓某些控件在特定情況下灰化不可用,jquery可以輕松實現這個需求。
首先,在html中為需要灰化的控件添加一個class,例如“disabled”:
<button class="disabled">點擊我</button>
接著,在jquery中寫入如下代碼:
$('.disabled').prop('disabled', true).addClass('grayed-out');
這段代碼使用了jquery的prop()方法將控件的disabled屬性設置為true,使其不可用,同時使用了addClass()方法給控件添加一個“grayed-out”類名,該類名可以通過css樣式設置控件的樣式。
下面是一個完整的代碼示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>控件灰化示例</title> <style> .grayed-out { opacity: 0.5; cursor: not-allowed; } </style> </head> <body> <button class="disabled">點擊我</button> <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.disabled').prop('disabled', true).addClass('grayed-out'); }); </script> </body> </html>
以上就是使用jquery實現控件灰化不可用的方法,你可以根據自己的需要進行修改。
下一篇div class詳解