选中时如何启用复选框？

Question

这是我的代码：

HTML：

<input type="checkbox" id="checkme"/>
<p class="label-text"><b>By checking this, you agree to our <a href="terms.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Terms &amp; <br>Conditions</a>&nbsp;and&nbsp;<a href="privacy.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Privacy Policy</a></b></p>
<input class="formBtn" type="submit" id="submit" value="Submit" disabled="disabled" />

JavaScript

var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('submit');
checker.onchange = function(){
     if(this.checked){
          sendbtn.disabled = false;
     } else {
          sendbtn.disabled = true;
};

jQuery

$( "#checkme" ).on( "click", function() {
        if($( "#checkme:checked" ).length > 0) {
               $('#submit').prop('disabled', false);
        } else{
               $('#submit').prop('disabled', true);
        }  
});

一切都不起作用。请帮忙。

还帮助我在 javascript 中为 css 添加一个类，以使按钮在禁用时透明。非常感谢！

Answer 1

您需要使用change 而不是click 并为disabled 输入添加样式，您可以简单地使用#submit[disabled]

$( "#checkme" ).on( "change", function() {
  $('#submit').prop('disabled', !this.checked);
}).change(); // use this to run change event on load

#submit{
  transition-duration : 0.5s;
}
#submit[disabled]{
  opacity : 0.5;
  transition-duration : 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkme"/>
<p class="label-text"><b>By checking this, you agree to our <a href="terms.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Terms &amp; <br>Conditions</a>&nbsp;and&nbsp;<a href="privacy.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Privacy Policy</a></b></p>
<input class="formBtn" type="submit" id="submit" value="Submit"/>

为了简化您的代码，您可以使用 $('#submit').prop('disabled', !this.checked); this.checked 在选中时返回 true，在未选中时返回 false，因此您可以在它之前使用 ! 来反转它

注意：确保包含 jquery

要在禁用 true/false 时向输入添加效果，您可以添加类似 transition-duration : 0.5s; 的内容

Answer 2

Javascript 解决方案

我只是用常规的 javascript 保持简单。我在复选框中添加了一个 onclick 功能，当复选框被选中时启用提交。
希望对您有所帮助。

function checkA(){
if(document.getElementById('checkme').checked == true){   
document.getElementById('submit').disabled = "";
} else {
document.getElementById('submit').disabled = "disabled";}}

<input onclick="checkA();" type="checkbox" id="checkme">
<p class="label-text"><b>By checking this, you agree to our <a href="terms.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Terms &amp; <br>Conditions</a>&nbsp;and&nbsp;<a href="privacy.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Privacy Policy</a></b></p>
<input class="formBtn" type="submit" id="submit" value="Submit" disabled="disabled">