javascript - 关于禁用按钮的基本 javascript 问题

Question

我在我的 html 表单中嵌入了一段简单的 JavaScript，而不是一个单独的文件，它应该禁用提交表单按钮，直到选中某个复选框，但它似乎不起作用。

<script>
    var disclaimer = document.getElementById("disclaimer");
    var submitButton = document.getElementById("submit");

    submitButton.disabled = true;
    if (disclaimer.checked) {
        submitButton.disabled = false;
    }

 </script>

这是我写的，看起来简单有效，但我没有得到我想要的结果。经过研究，我看到了诸如

之类的结果

$('#check').click(function(){
if($(this).attr('checked') == false){
    $('#btncheck').attr("disabled","disabled");   
}
else
    $('#btncheck').removeAttr('disabled');
});

现在显然变量名等的命名不同，但这看起来与我上面提供的 JavaScript 代码一点也不相似，而且我很难从下面明显有效的代码中获得有用的提示一样的东西。有人可以分解下面的代码段，以便我能够修复上面的代码吗？

这是包含两个相关 HTML id 的代码片段，

<label style='font-size: smaller;'>
  <input type='checkbox' name='disclaimer' id='disclaimer' required='required' />
  I understand that by submitting this form, 
  I am transferring any copyright and intellectual property rights to the form's owner, 
  that I have the right to do so,
  and that my submission is not infringing on other people's rights.
</label><br/>

<script>
    var disclaimer = document.getElementById("disclaimer");
    var submitButton = document.getElementById("submit");

    submitButton.disabled = true;
    if (disclaimer.checked) {
        submitButton.disabled = false;
    }

 </script>


  <div class='vspace'/>
  <input type='submit' id='submit' name='came-from-form'/>

编辑:下面有很多很棒的答案，它们非常有用，让我知道我正在处理什么。我现在面临的问题是实现这些事情。在下面的代码片段中，这似乎很容易实现，但是当我尝试实现下面的每个答案时，我没有看到任何结果，这显然意味着我在表单中的其他地方做错了。如果有帮助的话，我已经附上了相关代码的较大片段。否则最好提出一个新问题。

Answer 1

我相信您正在尝试在普通 JavaScript 中找到解决方案。

您必须将事件附加到 check 元素，如下所示:

var disclaimer = document.getElementById("disclaimer");
document.getElementById("submit").disabled = true;
disclaimer.addEventListener('click', function(){
  var submitButton = document.getElementById("submit");
  submitButton.disabled = true;
  if (this.checked) {
      submitButton.disabled = false;
  }
});

<form>
  <input type="checkbox" id="disclaimer"/>
  <button id="submit">Submit</button>
</form>

更新:

在您的代码中，脚本在 DOM 完全加载之前执行。因此你会得到一个错误:

Uncaught TypeError: Cannot set property 'disabled' of null

您可以将脚本放在末尾或用

包装您的代码

DOMContentLoaded

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event load should be used only to detect a fully-loaded page. It is an incredibly common mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.

<label style='font-size: smaller;'>
<input type='checkbox' name='disclaimer' id='disclaimer' required='required' />
I understand that by submitting this form, 
I am transferring any copyright and intellectual property rights to the form's owner, 
that I have the right to do so,
and that my submission is not infringing on other people's rights.
</label><br/>

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var disclaimer = document.getElementById("disclaimer");
    document.getElementById("submit").disabled = true;
    disclaimer.addEventListener('click', function(){
      var submitButton = document.getElementById("submit");
      submitButton.disabled = true;
      if (this.checked) {
        submitButton.disabled = false;
      }
    });
  });

</script>


<div class='vspace'/>
<input type='submit' id='submit' name='came-from-form'/>