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

Question

我有东西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');
    }
});

Answer 1

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

更新 fiddle :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 将自己绑定(bind)到尚未被处理的 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 元素完成加载后将事件处理方法绑定(bind)到它们。