选中单选按钮时启用表单按钮

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>

您可以看到我已将禁用属性添加到按钮，并在复选框的更改中将其删除，在该复选框中我检查了复选框的状态