如何啓用和禁用基於某些限定條件

Question

我有一個代碼，我通過調用函數與下面的代碼

<input type=submit value=SUBMIT onclick=report_submit()> 

我希望按鈕最初只有禁用提交的提交按鈕如果我的所有輸入都不爲null，則啓用。

表單提交後，我希望再次禁用按鈕，以避免重複插入。

我嘗試過堆棧溢出的其他例子，但是它是永久啓用或禁用。

Answer 1

當用戶鍵入或更改選擇它時，檢查表單以查看是否所有輸入都有值，如果不是，則它會再次禁用該按鈕。另外如果有興趣Array.prototype.slice()。

function enableSubmit() { 
 
    
 
    // counts the elments of inputs with values 
 
    var i = 0; 
 
    Array.prototype.slice.call(document.forms["form"].elements).forEach(function(e) { 
 
    if (e.value) { 
 
     i++; 
 
    } 
 
    }); 
 
    
 
    // if all the elements have a value enabled the submit button 
 
    if (i === (document.forms["form"].elements.length - 1)) { 
 
    document.getElementById('disabled').disabled = false; 
 
    } else { 
 
    document.getElementById('disabled').disabled = true; 
 
    } 
 
}; 
 

 
// add a event listener to each tag require (were using input and select) 
 
Array.prototype.slice.call(document.forms["form"].elements).forEach(function(e) { 
 
    if (e.tagName === 'INPUT') { 
 
    e.addEventListener("keyup", function(e) { 
 
     enableSubmit(); 
 
    }, false); 
 
    } else if (e.tagName === 'SELECT') { 
 
    e.addEventListener("change", function(e) { 
 
     enableSubmit(); 
 
    }, false); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="form" method="post"> 
 
    <input id="text" name="text" type="text" /> 
 
    <select id="options" name="options"> 
 
    <option value></option> 
 
    <option value="1">Option 1</option> 
 
    </select> 
 
    <input type="submit" id="disabled" disabled="disabled" /> 
 
</form>

Answer 2

kodecount提醒我，這基本特徵是不跨瀏覽器（即野生動物園看到this）100％。

爲什麼不在每個輸入上使用required屬性並將其稱爲一天。只要您的required輸入沒有任何值，您可以單擊該提交按鈕一千次，並且在required的每個輸入都具有值之前，它將永遠不會被允許執行任何操作。沒有JS，沒有CSS，只有HTML。

<form id='f1' onsubmit='nullCheck()'> 
 
    <input name='i1' required> 
 
    <br/> 
 
    <input name='i2' required> 
 
    <br/> 
 
    <input name='i3' required> 
 
    <br/> 
 
    <input name='i4' required> 
 
    <br/> 
 
    <input type='submit'> 
 
</form> 
 
<form id='f2' onsubmit='nullCheck()'> 
 
    <input name='i5' required> 
 
    <br/> 
 
    <input name='i6' required> 
 
    <br/> 
 
    <input type='submit'> 
 
</form>