Question

这是我的代码：

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="option1" value="foo">
<input type="radio" name="option1" value="bar">

的JavaScript

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

的jQuery

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

一切都行不通。请帮忙。

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

Answer 1

您需要使用change而不是click并在disabled输入中添加样式，您只需使用#submit[disabled]

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

为了简化您的代码，您可以使用$('#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">

选中后如何启用复选框？

2 个答案:

Javascript解决方案