input 中的enabled与disabled属性

 

<style type="text/css">
        *{
            padding: 0;
            margin: 0;
            list-style-type: none;
            box-sizing:border-box;
        }
        body{
            padding: 20px;
        }
        input[type="text"]:enabled{
            background:#f60;
        }

        input[type="text"]:disabled{
            background:#ccc;
        }
        
    </style>

 

<input type="checkbox" id="c1"><span id="use">不可用</span>
<input type="text" disabled id="text">

 

<script>
        function fn(){
            var c1 = document.getElementById("c1");
            var text = document.getElementById("text");
            var use = document.getElementById("use");
            if(c1.checked){
                text.removeAttribute("disabled");
                use.innerHTML = "可用";
            }else{
                text.disabled = "true"
                use.innerHTML = "不可用";
            }
        }
        c1.onchange=function(){
            fn();
        }
    </script>