jQuery按钮置灰示例-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery按钮置灰示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.container {
margin-top: 50px;
text-align: center;
}
#actionButton {
padding: 12px 24px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
}
#actionButton:hover:enabled {
background-color: #45a049;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
#actionButton:disabled {
background-color: #cccccc;
color: #666666;
cursor: not-allowed;
}
.status {
margin-top: 20px;
color: #666;
font-style: italic;
}
.footer {
margin-top: 50px;
text-align: center;
color: #666;
font-size: 0.9em;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery按钮置灰示例</h1>
<p>点击下方按钮后，按钮将置灰不可用，5秒后自动恢复</p>

<button id="actionButton">点击我执行操作</button>
<p class="status" id="statusText">按钮可用，等待操作...</p>

</div>

<script>
$(document).ready(function() {
$('#actionButton').click(function() {
// 禁用按钮
$(this).prop('disabled', true);
$('#statusText').text('按钮已禁用，正在处理中...');

// 模拟一个需要时间处理的操作
setTimeout(function() {
// 启用按钮
$('#actionButton').prop('disabled', false);
$('#statusText').text('操作完成，按钮已恢复可用状态！');

// 3秒后恢复默认状态
setTimeout(function() {
$('#statusText').text('按钮可用，等待操作...');
}, 3000);
}, 5000); // 5秒后恢复按钮


});

console.log(supportInfo);
});
</script>
</body>
</html>