前端防呆-disabled button

前幾天偶然聊天時聽到同事說，他新接的系統意外掛了。

其中一個原因是某個骨灰級的系統在前端不會disable submit button，剛好這系統的資源被砍成本

就這樣意外的被打掛，又意外的被抓去飛高高檢討。

想想好像不難，但看到Stack Overflow到現在還是有人在問

也許應該幫自己寫個範例，

免得哪天會突然需要用到

簡單一個script就能處理好

先上HTML

<form>
    input1
    <input name='txt' type='text' required id='txt' />
    input2
    <input type="text" name="username">

    <button id='btn' type='button' onclick='disableButton()'>I'm button</button>
</form>

接著JS

function disableButton() {
        //id disabled
        document.getElementById('txt').disabled = true;
        txt.disabled = true;

        //input disabled
        $('input').prop( 'disabled', true );
   
        //button disabled
        var btn = document.getElementById('btn');
        btn.disabled = true;
        btn.innerText = 'Send'
    }

可以用抓id的方式去disabled input

或是把所有input都職街disable

最後再鎖定button，這樣就能避免資料被修改後送出了。

---