如果取消选中复选框,如何禁用提交按钮？

Question

我这里有些东西似乎无法帮助我禁用提交按钮.有任何想法吗？

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

Answer 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元素.

Answer 2

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