`
disabled`
属性用于禁用
HTML 元素，使其不可用且不能被用户操作。以下是不同场景下 `
disabled`
属性的使用方法：
###
HTML 中静态设置
在
HTML 标签中直接添加 `
disabled`
属性，可以使元素在页面加载时就处于禁用状态。例如，禁用一个按钮和一个输入框：
```
html
<
button disabled>禁用的按钮</
button>
<
input type="text"
disabled placeholder="禁用的输入框">
```
### JavaScript 中动态设置
可以使用 JavaScript 动态地添加或删除 `
disabled`
属性。要添加 `
disabled`
属性，可将其设置为相应的值；要删除 `
disabled`
属性，可调用元素的 `removeAttribute()` 方法，将 `
disabled` 作为参数传递。例如：
```
html
<!DOCTYPE
html>
<
html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<
button id="my
Button">可点击的按钮</
button>
<
button id="enable
Button">启用按钮</
button>
<script>
// 获取按钮元素
const my
Button = document.getElementById('my
Button');
const enable
Button = document.getElementById('enable
Button');
// 禁用按钮
my
Button.
disabled =
true;
// 为启用按钮添加点击事件监听器
enable
Button.addEventListener('click', function () {
// 启用按钮
my
Button.removeAttribute('
disabled');
});
</script>
</body>
</
html>
```
### jQuery 中动态设置
在 jQuery 中，可使用 `attr()` 方法来设置或移除 `
disabled`
属性。以下示例展示了如何禁用和启用一个输入框：
```
html
<!DOCTYPE
html>
<
html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery
disabled example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<
input type="text" id="my
Input" placeholder="输入框">
<
button id="disable
Button">禁用输入框</
button>
<
button id="enable
Button">启用输入框</
button>
<script>
$(document).ready(function () {
// 禁用输入框
$('#disable
Button').click(function () {
$('#my
Input').attr('
disabled', '
disabled');
});
// 启用输入框
$('#enable
Button').click(function () {
$('#my
Input').removeAttr('
disabled');
});
});
</script>
</body>
</
html>
```
### Vue.js 中动态绑定
在 Vue.js 里，可使用 `v-bind` 指令（简写为 `:`）来动态绑定 `
disabled`
属性。以下示例展示了如何根据数据状态来禁用或启用一个按钮：
```vue
<template>
<div>
<
button :
disabled="is
ButtonDisabled">
{{ is
ButtonDisabled ? '按钮已禁用' : '按钮可点击' }}
</
button>
<
button @click="toggle
ButtonState">切换按钮状态</
button>
</div>
</template>
<script>
export default {
data() {
return {
is
ButtonDisabled:
true
};
},
methods: {
toggle
ButtonState() {
this.is
ButtonDisabled = !this.is
ButtonDisabled;
}
}
};
</script>
```
本文介绍了一种使用HTML实现按钮点击后的禁用效果的方法。通过设置disabled属性为true，可以使按钮在被点击后变为不可点击状态，并显示为带有痕迹的字体样式。
扫一扫
5165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
