CODEWITHSUNDEEP
javascriptjqueryhtml
Muiter
Muiter

Reputation: 1520

Enable form button when radio button is checked

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>

Upvotes: 0

Views: 53

Answers (3)

XYZ
XYZ

Reputation: 4480

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>

Upvotes: 0

DASH
DASH

Reputation: 297

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

Upvotes: 0

Michał Perłakowski
Michał Perłakowski

Reputation: 92521

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>

Upvotes: 2

Related Questions