jquery如何给input添加只读属性

发布时间：2021-11-16 16:07:22 作者：iii
来源：亿速云阅读：1063

# jQuery如何给input添加只读属性

## 前言

在Web开发中，表单控件的交互控制是常见需求。通过jQuery动态设置`<input>`元素的只读属性（`readonly`），可以实现禁止用户编辑但保留数据提交的功能。本文将详细介绍5种实现方式，对比不同场景下的最佳实践，并附上代码示例和注意事项。

---

## 一、基础方法：prop()与attr()

### 1. 使用prop()方法（推荐）
```javascript
// 添加只读属性
$('#inputId').prop('readonly', true);

// 移除只读属性
$('#inputId').prop('readonly', false);

优点：
- 明确操作布尔属性
- 兼容jQuery 1.6+版本

2. 使用attr()方法

// 添加只读属性
$('input').attr('readonly', 'readonly');

// 移除只读属性
$('input').removeAttr('readonly');

注意：
- HTML4要求属性值为readonly，HTML5支持布尔值
- 移除时需用removeAttr()

二、动态控制方案

1. 根据条件设置只读

$('#toggleBtn').click(function() {
    const isReadonly = $('#inputId').prop('readonly');
    $('#inputId').prop('readonly', !isReadonly);
});

2. 批量设置表单字段

// 设置所有text类型的input为只读
$('input[type="text"]').prop('readonly', true);

三、特殊场景处理

1. 禁用与只读的区别

特性	readonly	disabled
表单提交	包含值	不包含值
样式	正常显示	通常灰色
事件响应	可触发focus/blur	不触发任何事件

2. 针对CSS伪类

input[readonly] {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

四、常见问题解决方案

1. 动态生成的元素处理

$(document).on('click', '.lock-btn', function() {
    $(this).prev('input').prop('readonly', true);
});

2. 框架兼容性问题

// Vue中避免直接操作DOM
methods: {
    setReadonly() {
        this.isReadonly = true; // 通过v-bind:readonly控制
    }
}

五、性能优化建议

选择器优化：
”`javascript // 差性能 $(‘input’).prop(‘readonly’, true);

// 优性能 $(‘#formId input.specific-class’).prop(‘readonly’, true);


2. **链式操作**：  
   ```javascript
   $('#formId')
     .find('input')
     .prop('readonly', true)
     .addClass('locked');

六、完整示例代码

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="username" placeholder="用户名">
    <button id="toggleReadonly">切换只读状态</button>

    <script>
        $(function() {
            $('#toggleReadonly').click(function() {
                const $input = $('#username');
                $input.prop('readonly', !$input.prop('readonly'));
            });
        });
    </script>
</body>
</html>

七、延伸知识

1. 其他表单控制属性

disabled：完全禁用控件
readonly：仅禁止编辑
autocomplete="off"：关闭自动填充

2. 现代JavaScript替代方案

// 原生JS实现
document.getElementById('inputId').readOnly = true;

总结

方法	适用场景	版本要求
`.prop()`	大多数情况（推荐）	jQuery 1.6+
`.attr()`	需要HTML4兼容时	所有版本
`.removeAttr()`	移除属性时	所有版本

通过合理使用这些方法，可以高效实现表单交互控制。建议优先选择prop()方法，并注意动态生成元素的事件委托处理。

最佳实践提示：在表单提交前验证只读字段的值，防止通过开发者工具修改属性后的非法提交。 “`