在网页开发中，jQuery 库是一个广泛使用的 JavaScript 工具，它简化了 DOM 操作、事件处理等任务，本文将介绍如何使用 jQuery 根据 ID 设置元素为只读，以便在需要时轻松地限制用户的输入。
让我们了解什么是只读属性，在 HTML 表单中，只读属性可以防止用户修改输入字段的值，这在某些场景下非常有用，当你希望显示一些不可更改的数据或在特定条件下禁用表单输入时。
要使用 jQuery 设置元素为只读，你需要首先确保已经在项目中引入了 jQuery 库，你可以通过以下方式将其添加到你的 HTML 文件中：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
接下来，我们需要编写一个简单的 HTML 表单，用于演示如何根据 ID 设置输入字段为只读，以下是一个包含两个输入字段的示例：
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<form>
<label for="read-only-input">只读输入：</label>
<input type="text" id="read-only-input" value="这是只读输入">
<label for="read-write-input">可读写输入：</label>
<input type="text" id="read-write-input" value="这是可读写输入">
<button id="toggle-read-only">切换只读状态</button>
</form>
<script>
// 在此处编写 jQuery 代码
</script>
</body>
</html>
现在，我们需要编写 jQuery 代码来根据 ID 设置输入字段为只读，我们将为 "切换只读状态" 按钮添加一个点击事件处理程序，当用户点击该按钮时，将切换两个输入字段的只读状态。
以下是实现该功能的 jQuery 代码：
$(document).ready(function() {
// 当文档加载完成后，绑定点击事件处理程序
$('#toggle-read-only').on('click', function() {
// 获取当前两个输入字段的只读状态
var readOnlyInputReadOnly = $('#read-only-input').prop('readonly');
var readWriteInputReadOnly = $('#read-write-input').prop('readonly');
// 切换只读状态
if (readOnlyInputReadOnly) {
// 如果当前只读输入字段是只读的，将其设置为可读写
$('#read-only-input').prop('readonly', false);
// 如果当前可读写输入字段是可读写的，将其设置为只读
$('#read-write-input').prop('readonly', true);
} else {
// 如果当前只读输入字段是可读写的，将其设置为只读
$('#read-only-input').prop('readonly', true);
// 如果当前可读写输入字段是只读的，将其设置为可读写
$('#read-write-input').prop('readonly', false);
}
});
});
现在，当你点击 "切换只读状态" 按钮时，两个输入字段的只读状态将会切换，这个简单的示例展示了如何使用 jQuery 根据 ID 设置元素为只读，从而为用户提供更好的交互体验，在实际项目中，你可以根据需要调整代码，以实现更复杂的功能。