jquery根据id设置只读

在网页开发中，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设置只读