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）。您应该创建一个外部脚本并将事件绑定在其中：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

一样编写

＆＃13;

.disabled{
  opacity:.5;
}

＆＃13;

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

＆＃13;

或者使用外部脚本并点击

调用一个函数

＆＃13;

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

＆＃13;

.disabled{
      opacity:.5;
    }

＆＃13;

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

＆＃13;

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>

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

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

3 个答案: