form内submit按钮的disabled失效?

在写表单时经常会为了防止多次提交, 而加入提交按钮一次点击后失效的功能,
但是新手的话有一点小问题要注意
比如下面的例子:

<form id='form1'>
<input type='text' name='content' />
<button type='submit' name='sub-btn'>Submit</button>
</form>

var form1 = docuemnt.getElementById('form1');
var input1 = form1.elements[0];

form1.addEventListener('submit', e => {
var target = e.target;
var btn = target.elements['sub-btn'];
    btn.disabled = true;
});

本来应该要实现的是点击按钮或者回车submit以后, 按钮变得不可选, 但是并没有实现, 为啥?
因为提交以后页面刷新了, 按钮以迅雷不及掩耳盗铃响叮当之势变到不可选又变回来了…
那么如何能看出效果呢?
最暴力的方式就是阻止submit的默认事件禁止刷新, 然后写自己的提交事件

form1.addEventListener('submit', e => {
    e.preventDefault();
//...
})