取消选中复选框时如何禁用提交按钮？答案

【问题标题】：How do i disable a submit button when checkbox is uncheck?取消选中复选框时如何禁用提交按钮？
【发布时间】：2011-07-24 10:21:56
【问题描述】：

我有一些 here 似乎无法帮助我禁用提交按钮。有什么想法吗？

<input type="checkbox" checked="checked" id="checky"><a href="#">terms and conditions</a>
<input type="submit" id="postme" value="submit">

$('#checky').click(function(){
    if($(this).checked == false){
         $('#postme').attr("disabled","disabled");   
    } else {
        $('#postme').removeAttr('disabled');
    }
});

【问题讨论】：

标签： javascript jquery checkbox

【解决方案1】：

您应该检查属性checked 而不是方法。

更新小提琴：http://jsfiddle.net/8YBu5/7/

$('#checky').click(function(){
    if($(this).attr('checked') == false){
         $('#postme').attr("disabled","disabled");   
    } else {
        $('#postme').removeAttr('disabled');
    }
});

编辑

记住这段代码需要包裹在$(document).ready()里面或者放在你的html代码的底部，否则你的JS会绑定到尚未加载的DOM元素上而失败。

将其包装在 .ready() 中

<script type='text/javascript'>
$(document).ready(function(){
    $('#checky').click(function(){
        if($(this).attr('checked') == false){
             $('#postme').attr("disabled","disabled");   
        } else {
            $('#postme').removeAttr('disabled');
        }
    });
});
</script>

此代码可以放在文档中的任何位置，并且只会在 DOM 准备好后触发，因此您不必担心过早触发。

将其放在文档底部

<!-- some HTML -->
<script type='text/javascript'>
        $('#checky').click(function(){
            if($(this).attr('checked') == false){
                 $('#postme').attr("disabled","disabled");   
            } else {
                $('#postme').removeAttr('disabled');
            }
        });
</script>
</body>
</html>

如果您将其放在文档的底部，则无需将其包装在 .ready() 中，因为在加载其他所有内容之前不会读取 javascript。这种方法有性能提升（如果你有很多 JS）

您可以使用其中任何一种方法来确保您的 JS 仅在 DOM 元素完成加载之后将事件处理方法绑定到。

【讨论】：

+1 虽然他没有检查方法，但他正在检查集合上的属性。
@john 它在 jsfiddle 上完美运行，但是在我看来，脚本甚至没有运行。我在点击功能之后放置了警报测试，但它甚至没有触发。有什么原因吗？
如果您使用的是 firefox，请按 CTRL + SHIFT + J 并查看错误选项卡以检查存在哪些错误。还要确保包含 jquery 并确保此方法包含在 $(document).ready(function(){})
如果你这样做，那么你必须把它放在底部。编辑我的问题，向您展示如何
从 jQuery 1.6 开始，您应该使用 prop 而不是 attr，请参阅下面的答案。打高尔夫球也更好。

【解决方案2】：

if(!$(this).is(':checked') ...

【讨论】：

我个人推荐这个而不是.attr('checked') == false 方法。更具可读性和美观性。

【解决方案3】：

jQuery 1.6 之前attr 可以，1.6 之后你必须使用prop。

$('#checky').click(function(){
  $('#postme').prop('checked', !$(this).checked);
})

属性和属性是不同的东西，可惜jQuery花了很长时间来区分它们。

另请参阅：.prop() vs .attr()

【讨论】：

【解决方案4】：

将$(this).checked 更改为if($(this).attr('checked') == false){

Here你去。

【讨论】：

【解决方案5】：

试试这个方法

$('#checky').click(function(){

    if(this.checked == false){
         $('#postme').attr("disabled","disabled");   
    }
    else {
        $('#postme').removeAttr('disabled');
    }
});

【讨论】：

【解决方案6】：

试试这个

$(document).ready(function(){
                $("#postme").attr("disabled","disabled");
                    $("#checky").click(function(){
                        if($("#checky").is(":checked")){
                         $("#postme").removeAttr("disabled");   
                         }
                        else{
                            $("#postme").attr("disabled","disabled");
                            }
                    });
                })

【讨论】：

【解决方案7】：

向按钮#postme 添加一个单击事件，用于检查复选框是否被选中。勾选则返回false，否则返回true。

$('#postme').click( function () {
    if ( !$('#checky').attr('checked') ) {
        return false;
    }
});

【讨论】：

他希望禁用该按钮 - 这仍然允许用户单击该按钮。