在JavaScript中，做一個輸入框變灰的功能似乎是非常簡單的一件事情。無論是在網站表單上還是在移動APP中，輸入框變為灰色后都會讓用戶明確地知道它處于不能輸入狀態。下面我們來看看如何在JavaScript中實現這一功能。
首先，我們需要先理解一下JavaScript中的DOM屬性和事件。DOM（Document Object Model）是指文檔對象模型。在HTML中，每個標簽都是一個DOM對象，因此我們可以通過JavaScript來控制和修改HTML標簽的屬性和樣式。而事件則是指當HTML標簽被用戶或瀏覽器觸發時所觸發的方法或函數。常見的事件包括點擊事件、鼠標移動事件和輸入框的焦點事件等等。
接下來，我們可以通過JavaScript來修改輸入框的樣式，讓它看起來像是處于灰色狀態。下面是一段示例代碼：

<input type="text" id="input-text">
<script>
var input = document.querySelector('#input-text');
input.style.backgroundColor = '#dcdcdc';
input.style.color = '#a9a9a9';
</script>

上面的代碼中，我們通過document.querySelector方法獲取了ID為input-text的輸入框，并設置了其背景色為#dcdcdc（即灰色），字體顏色為#a9a9a9（即淺灰色）。這樣一來，輸入框就會看起來像是無法輸入的狀態。
當然，這只是讓輸入框看起來像是處于灰色狀態，并不能真正地將它變為不能輸入的狀態。如果我們需要讓輸入框變為一個不能輸入的狀態，那么我們可以通過JavaScript來給它添加一個disabled屬性。具體代碼如下：

<input type="text" id="input-text">
<script>
var input = document.querySelector('#input-text');
input.disabled = true;
</script>

上面的代碼中，我們通過設置disabled屬性來使得輸入框無法再次獲取焦點，從而實現了輸入框不能輸入的狀態。當然，如果我們需要再把它變成可輸入狀態，只需要將disabled屬性設置為false即可。
在實際開發中，我們可能會遇到多個輸入框需要變為灰色狀態的情況。這時候，我們可以通過循環的方式來批量處理所有輸入框的樣式。比如下面這段代碼會將所有class為input-class的輸入框變為灰色狀態：

<input type="text" class="input-class">
<input type="text" class="input-class">
<input type="text" class="input-class">
<script>
var inputs = document.querySelectorAll('.input-class');
for (var i = 0; i < inputs.length; i++) {
inputs[i].style.backgroundColor = '#dcdcdc';
inputs[i].style.color = '#a9a9a9';
inputs[i].disabled = true;
}
</script>

上面的代碼中，我們使用了document.querySelectorAll方法來獲取所有class為input-class的輸入框，并循環設置它們的樣式和disabled屬性，實現了批量處理的效果。
總的來說，通過JavaScript實現輸入框變灰色的功能是一個比較簡單的任務。我們只需要控制輸入框的樣式和disabled屬性就可以了。如果我們需要批量處理多個輸入框，可以使用循環和選擇器來實現。