選中單選按鈕時啟用表單按鈕

Question

我正在使用此行來（嘗試）通過刪除類來啟用禁用的提交按鈕。 沒有顯示結果或錯誤。 這是要走的路嗎，還是我需要為此編寫一個單獨的腳本？

<label><input type="checkbox" value="ja" echo onclick=\"document.getElementById(\'submit_delete\').removeClass(\'disabled\')\">Ja ik wil deze toolbox verwijderen</label>';

<button type="button" id="submit_delete" class="btn btn-primary disabled">Opslaan</button>

Answer 1

您不應該混合使用演示文稿（HTML）和邏輯（JavaScript）。 您應該創建一個外部腳本並將事件綁定到其中：

 document.querySelector('input[type="checkbox"]').addEventListener('click', () => document.querySelector('#submit_delete').classList.remove('disabled') ) 

 button.disabled::after { content: " (disabled)"; } button::after { content: " (not disabled)"; } 

 <label><input type="checkbox" value="ja">Ja ik wil deze toolbox verwijderen</label>'; <button type="button" id="submit_delete" class="btn btn-primary disabled">Opslaan</button> 

Answer 2

使用可以像onclick="document.getElementById('submit_delete').classList.remove('disabled')"

 .disabled{ opacity:.5; } 

 <label><input type="checkbox" value="ja" onclick="document.getElementById('submit_delete').classList.remove('disabled')">Ja ik wil deze toolbox verwijderen</label>'; <button type="button" id="submit_delete" class="btn btn-primary disabled">Opslaan</button> 

或使用外部腳本並在單擊時調用函數

 function changeButton(event){ if(event.target.checked){ document.getElementById('submit_delete').classList.remove('disabled') }else{ document.getElementById('submit_delete').classList.add('disabled') } } 

 .disabled{ opacity:.5; } 

 <label><input type="checkbox" value="ja" onclick="changeButton(event)">Ja ik wil deze toolbox verwijderen</label>'; <button type="button" id="submit_delete" class="btn btn-primary disabled">Opslaan</button> 

Answer 3

僅通過刪除類，不能啟用該按鈕。 首先，您應該在按鈕上禁用屬性。 然后，選中該復選框，刪除該屬性。

<label><input type="checkbox" value="ja" onchange="enableDisableBtn">Ja ik wil deze toolbox verwijderen</label>;

<button type="button" id="submit_delete" class="btn btn-primary disabled" disabled>Opslaan</button>
<style type="text/css">
    .btn.disabled{
      opacity:.5;
    }
</style>
<script>
    function enableDisableBtn(e){
        var chk = e.target;
        var btn = document.getElementById('submit_delete');
        if(chk.checked){
            btn.disabled = false;
            btn.className = "btn btn-primary";
        }else{
            btn.disabled = true;
            btn.className = "btn btn-primary disabled";
        }

    }
</script>

您可以看到我已將禁用屬性添加到按鈕，並在復選框的更改中將其刪除，在該復選框中我檢查了復選框的狀態