input 中的enabled与disabled属性

<style type="text/css">
        *{
            padding:;
            margin:;
            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>