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">

 1 <script>
 2         function fn(){
 3             var c1 = document.getElementById("c1");
 4             var text = document.getElementById("text");
 5             var use = document.getElementById("use");
 6             if(c1.checked){
 7                 text.removeAttribute("disabled");
 8                 use.innerHTML = "可用";
 9             }else{
10                 text.disabled = "true"
11                 use.innerHTML = "不可用";
12             }
13         }
14         c1.onchange=function(){
15             fn();
16         }
17     </script>