input 标签 启用/禁用 编辑

1 通过原生js 控制 input 标签 启用/禁用 编辑

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>通过原生js启用/禁用input编辑</title>
</head>
<body>
    <div id="test_container"></div>
    <input id="id1_input" placeholder="请输入"/>
    <button id="enableInput_btn">启用input编辑</button>
    <button id="disableInput_btn">禁用input编辑</button>

    <script type="text/javascript">
        /*
         * 为启用/禁用按钮添加 click 事件
         */
        document.getElementById('enableInput_btn').onclick = enableInput;
        document.getElementById('disableInput_btn').onclick = disableInput;


        /*
         * 启用编辑
         */
        function enableInput() {
            document.getElementById('id1_input').disabled = false;
        }


        /*
         * 禁用编辑
         */
        function disableInput() {
            document.getElementById('id1_input').disabled = true;
        }
    </script>
</body>
</html>

2 通过 jquery 控制 input 启用/禁用 编辑

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>通过jquery启用/禁用input编辑</title>
    <script src="Common/js/jquery/jquery-1.4.1.min.js"></script>
</head>
<body>
    <div id="test_container"></div>
    <input id="id1_input" placeholder="请输入" disabled/>
    <button id="enableInput_btn">启用input编辑</button>
    <button id="disableInput_btn">禁用input编辑</button>

    <script type="text/javascript">
        /*
         * 为启用/禁用按钮添加 click 事件
         */
        $('#enableInput_btn').click(enableInput);
        $('#disableInput_btn').click(disableInput);


        /*
         * 启用编辑
         */
        function enableInput() {
            $('#id1_input').removeAttr('disabled');
        }


        /*
         * 禁用编辑
         */
        function disableInput() {
            $('#id1_input').attr('disabled', true);
        }
    </script>
</body>
</html>

 

posted @ 2021-04-15 21:49  温故纳新  阅读(708)  评论(0)  编辑  收藏  举报