Enable form button when radio button is checked

Question

I am using this line to (try) to enable a disabled submit button by removing a class. There is no result or error shown. Is this the way to go or do I need to write an separate script for this?

<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

You shouldn't mix presentation (HTML) and logic (JavaScript). You should create an external script and bind the event inside it:

 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

Use can write it like 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> 

Or use external script and call a function on click

 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

Just by removing class, the button cannot be enabled. First you should have disabled attribute on the button. Then remove that attribute on check of the checkbox.

<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>

You can see I have added disabled attribute to button and removed it on the change of the checkbox, where I have checked the state of the checkbox