Question

在此程序中，我需要在未选中复选框时禁用Html Button。仅在选中复选框时才应启用按钮。我使用Jquery版本1.8.3。但是在这个程序中，启用和禁用之间的交换不能像我预期的那样工作。

// ------ HTML

    <body>
Some agreement here
<p>
    <input type="checkbox" id="agree" />
</p>
<input type="button" value="Continue" disabled="disabled" id="continue"/>

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/class.js"></script>  
</body>

// ------ JQuery的

$(document).ready(function(){
    $('#agree').change(function(){
        state = $(this).attr('value');
        if(state == 'on'){
            $('#continue').removeAttr('disabled');
        }else if(state == ''){
            $('#continue').attr('disabled','disabled');
        }

    });
});

Answer 1

对于disabled（和checked），您应该使用.prop()

$("#continue").prop("disabled",true);

虽然如果你告诉我们究竟什么没有按预期工作会有所帮助

Answer 2

请尝试以下功能：

$(document).ready(function(){
    $('#agree').change(function(){
        var checked = $(this).prop('checked')
        if(checked){
            $('#continue').removeAttr('disabled');
        }else{
            $('#continue').attr('disabled','disabled');
        }
    });
});

请参阅this fiddle.

总之，您正在检查#agree的值，该值未在任何时候设置。 prop()是确定是否选中复选框的更好方法。 prop()会返回true或false，让事情变得更容易。

Answer 3

$(document).ready(function(){
    $('#agree').change(function(){
        if($(this).is(":checked")){
            $('#continue').removeAttr('disabled');
        }else{
            $('#continue').attr('disabled','disabled');
        }

    });
});

Answer 4

禁用后的属性后面不需要="disabled"。只是做：

<input type="button" value="Continue" disabled />

无论如何你应该使用.prop('disabled', true)。还有.removeProp()。

Answer 5

$(document).ready(function(){
        $('#agree').click(function(){
           $("#continue").attr("disabled", !this.checked);

        });
    });

我希望这应该有所帮助。见Fiddle

Answer 6

一种简单的方法是使用this.checked或使用$(this).is(":checked")和prop来操纵input:button：

 $('#agree').change(function () {
     $("#continue").prop("disabled", !$(this).is(":checked"));
     //$("#continue").prop("disabled", !this.checked);
 });

演示：http://jsfiddle.net/hungerpain/p9u7Y/

JQuery removeAttr和attr

6 个答案: