提交按钮在选中复选框之前灰显？答案

【问题标题】：Submit button grayed out until check box ticked?提交按钮在选中复选框之前灰显？
【发布时间】：2014-05-12 07:42:10
【问题描述】：

我想弄清楚如何在未选中复选框时将提交按钮变灰？谁能指引我正确的方向。

html:

<div class = "form-group" id="myform">      
                <div class="checkbox">
                <label>
                    <input type="checkbox" id="checkbox"> I confirm that I am over 18 years of age
                </label>
            </div>
            <br><br>
            <div class ="row">
            <div class ="col-sm-6">
            <input type="submit" id="submit" class="btn btn-success btn-block btn-default" value="Submit">
            </div><div class ="col-sm-6">
            <input type="reset" class="btn btn-primary btn-block btn-default" value="Clear the Info">
            </div></div>
            <br><br><br><br><br><br><br><br><br>
            </div>

jQuery:

$(document).ready(function() {


$('#username').focus(); 
$('form').h5Validate({errorClass:'validationError' });

$('#submit').attr('disabled',true);
$('#checkbox').click(function(){
    $('#submit').attr('disabled',!this.checked);
});
$('#myform').submit(function(){
    return $('#checkbox').attr('checked');
});

});

【问题讨论】：

使用.prop() 而不是.attr() 来获取布尔属性值

标签： jquery html validation checkbox

【解决方案1】：

为什么不在点击事件中？

$(document).ready(function() {


    $('#submit').prop('disabled', true); // disabled by default

    $('#checkbox').click(function() {
       // change on checkbox click
       $('#submit').prop('disabled', !$('#checkbox').prop('checked'));
    });

});

【讨论】：

谢谢回复，现在提交按钮默认变灰了，但不以复选框是否打勾为条件？因为无论我是否勾选复选框，它都会保持灰色
你好。请检查我所做的编辑。它纠正了你的情况吗？
非常感谢

【解决方案2】：

$('#myform').on('change', ':checkbox', function() {
      If($(this).is(':checked')) {
           $(this).closest('#myform').find('#submit').attr('disabled', false);
      } 
      else{
            $(this).closest('#myform').find('#submit').attr('disabled', true);
 });

【讨论】：

【解决方案3】：

您好，请尝试一下，

if($("#checkkBoxId").attr("checked"))
{
    alert("Checked");
     $('#submit').attr('disabled','false');
}
else
{
    alert("Unchecked");
    $('#submit').attr('disabled','true');
}

【讨论】：