使用jQuery禁用/启用输入框
技术背景
在前端开发中，有时需要根据用户的操作或特定条件来禁用或启用表单元素（如输入框、文本框等）。jQuery 提供了便捷的方法来实现这一功能。
实现步骤
jQuery 1.6+ 版本
使用 .prop() 方法来更改 disabled 属性。
1
2
3
4
|
$("input").prop('disabled', true);
$("input").prop('disabled', false);
|
jQuery 1.5 及以下版本
使用 .attr() 方法设置 disabled 属性，使用 .removeAttr() 方法移除 disabled 属性。
1
2
3
4
|
$("input").attr('disabled', 'disabled');
$("input").removeAttr('disabled');
|
直接操作 DOM 对象
如果只处理一个元素，直接操作 DOM 对象可能更快。
1
2
3
|
this.disabled = true;
this.disabled = false;
|
切换输入框状态
如果想切换输入框的当前状态（类似于切换按钮的行为），可以使用以下方法：
1
2
3
| $("input").prop('disabled', ! $("input").prop('disabled') );
$("input").prop('disabled', function(i, v) { return !v; });
|
自定义方法
可以在代码中定义全局的 enable 和 disable 方法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| $.prototype.enable = function () {
$.each(this, function (index, el) {
$(el).removeAttr('disabled');
});
}
$.prototype.disable = function () {
$.each(this, function (index, el) {
$(el).attr('disabled', 'disabled');
});
}
$(".myInputs").enable();
$("#otherInput").disable();
|
2018 年及以后，不使用 jQuery（ES6）
1
2
3
4
|
[...document.querySelectorAll('input')].map(e => e.disabled = true);
document.getElementById('my-input').disabled = true;
|
jQuery Mobile 中禁用/启用元素
1
2
3
4
5
6
7
8
9
|
$('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true);
$('#someTextElement').textinput().textinput('disable');
$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');
|
核心代码
以下是一个完整的示例，展示如何根据复选框的状态来启用或禁用提交按钮：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable/Enable Input Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('form input[type="submit"]').prop("disabled", true);
$(".agree").click(function(){
if($(this).prop("checked") == true){
$('form input[type="submit"]').prop("disabled", false);
}
else if($(this).prop("checked") == false){
$('form input[type="submit"]').prop("disabled", true);
}
});
});
</script>
</head>
<body>
<form>
<input type="checkbox" class="agree"> 我同意条款<br>
<input type="submit" value="提交">
</form>
</body>
</html>
|
最佳实践
- 优先使用
.prop() 方法，因为它是 jQuery 1.6 及以上版本推荐的用于操作 DOM 属性的方法。 - 如果需要处理多个元素，使用 jQuery 的选择器和方法可以更方便地批量操作。
- 对于简单的场景，直接操作 DOM 对象可能更高效。
常见问题
关于 .removeProp() 方法
在 jQuery 1.6 中有 .removeProp() 方法，但不应该用于像 disabled 这样的原生属性。因为该方法会完全移除属性，并且一旦移除，就无法再次添加到元素上。建议使用 .prop() 方法将这些属性设置为 false。
兼容性问题
不同版本的 jQuery 在处理属性和方法上可能存在差异，建议根据实际使用的 jQuery 版本选择合适的方法。