香草JS

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完全加载之前执行。因此，您会得到一个错误：

未捕获的TypeError：无法将属性“禁用”设置为null

您可以将 script 放在末尾，也可以使用

包装代码

DOMContentLoaded

当初始HTML文档已完全加载和解析而没有等待样式表，图像和子帧完成加载时，将引发DOMContentLoaded事件。完全不同的事件加载应仅用于检测页面已满。在DOMContentLoaded更合适的地方使用负载是一个非常常见的错误，所以要谨慎。

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

Answer 2

快速移植

下面是对代码的快速解释，该代码在很大程度上依赖于JavaScript库jQuery：

// click() is called every time the element `id="check"` is clicked
$('#check').click(function(){

  // if element with `id="check"` has an attribute called *checked* set to false or it is null, then perform the if-block, otherwise perform the else-block
  if($(this).attr('checked') == false){
    // set disabled attribute of element with `id="btncheck"` to value of `disabled`
    $('#btncheck').attr("disabled","disabled");   
  }
  else
    // remove disabled attribute of element with `id="btncheck"`
    $('#btncheck').removeAttr('disabled');
});

$()中的所有内容都是在DOM中选择元素，主要是使用类似CSS的选择器
.attr()是一种获取/设置元素HTML属性的方法
.removeAttr()是一种删除HTML属性的方法

香草JS

您想要完成的工作可以使用香草JS完成。

const disclaimer   = document.querySelector("#disclaimer");
const submit       = document.querySelector("#submit");
submit.disabled    = true;    // default setting
const clickHandler = (event) => submit.disabled = !event.target.checked;

disclaimer.addEventListener('click', clickHandler );   // attach event

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

Answer 3

您发布的2个代码示例之间的唯一显着区别是，第二个示例包装了在click事件中禁用的按钮。

第一个说：加载页面后直接显示，如果选中此复选框，则启用按钮。（提示：仅发生一次）

第二个人说：对于复选框的每次单击，如果选中该复选框，请启用该按钮。

类似的东西应该起作用（未经测试）：

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

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

    }

    disclaimer.onclick = disableSubmitIfDisclaimerNotAccepted; // everytime the checkbox is clicked
    disableSubmitIfDisclaimerNotAccepted(); // on page load
</script>

Answer 4

希望这对您有用

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

如果条件指示在不放弃免责声明的情况下应执行的操作，则在此处。如果选中免责声明，则按钮将启用。

Answer 5

如果要使用jQuery，请使用prop（也可以使用attr，但我更喜欢prop）。对于复选框，请使用change事件而不是click。我想要：

$('#check').on("change", function(){
   var isChecked = $(this).is(':checked');
   $('#btncheck').prop("disabled", !isChecked); 
});

Answer 6

您必须侦听输入事件，以便在某些更改（例如，选中复选框）时进行更改。

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

submitButton.disabled = true;

disclaimer.addEventListener('change', function() {
  if (this.checked) {
    submitButton.disabled = false;
  } else {
    submitButton.disabled = true;
  }
})

有关事件的更多信息：https://developer.mozilla.org/en-US/docs/Web/Events

Answer 7

默认情况下，HTML中的“提交”按钮处于禁用状态：

<input type="checkbox" id="disclaimer">
<label for="disclaimer">Disclaimer</label>

<input type="submit" id="submit" disabled>

使用ES6语法而不使用JQuery的最简单解决方案：

let disclaimerCheckbox = document.getElementById('disclaimer'),
    submitButton       = document.getElementById('submit');

disclaimerCheckbox.onchange = () => submitButton.disabled = !disclaimerCheckbox.checked;

JSFiddle

注意：如果脚本具有defer attribute，则无需使用DOMContentLoaded事件。

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

7 个答案:

快速移植

香草JS