Question

我正在尝试弄清楚如何在取消勾选复选框时灰显提交按钮？任何人都可以引导我朝着正确的方向前进。

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');
});

});

Answer 1

为什么不在点击事件中这样做？

$(document).ready(function() {


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

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

});

Answer 2

嗨，请试试这个，

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

Answer 3

$('#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 个答案: