使用js控制readonly属性

最新推荐文章于 2025-07-01 19:47:14 发布

Rune Mage

最新推荐文章于 2025-07-01 19:47:14 发布

阅读量2.2w

点赞数 6

CC 4.0 BY-SA版权

分类专栏：异常记录文章标签： jquery readonly js

本文链接：https://blog.youkuaiyun.com/weixin_38405770/article/details/77847602

异常记录专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用原生JavaScript和jQuery来切换HTML输入框的readonly属性，通过具体示例展示了两种方法的具体实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、使用原生JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function switchUser() {
            let usernameEl = document.getElementById("username");
            const beforeVal = usernameEl.getAttribute("readonly");
            console.log("切换前状态：" + getStatus(beforeVal));
            if (beforeVal === null) {
                usernameEl.setAttribute("readonly", "readonly");
            } else {
                usernameEl.removeAttribute("readonly");
            }
            const afterVal = usernameEl.getAttribute("readonly");
            console.log("切换后状态：" + getStatus(afterVal));
        }

        function getStatus(readonlyVal) {
            if (readonlyVal === null) {
                return "读写"
            } else {
                return "只读"
            }
        }
    </script>
</head>
<body>

用户名：<input type="text" id="username" name="username"><br>
<button onclick="switchUser()">切换用户名readonly属性</button>

</body>
</html>