当复选框未被选中时，如何禁用提交按钮？

Question

当复选框未被选中时，如何禁用提交按钮？

8

我这里有个关于IT技术的问题需要翻译：这里有些东西，但似乎不能帮助我禁用提交按钮。你有什么想法吗？

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

- pivotal developer

7个回答

5

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

- manji

我个人推荐这种方法，而不是使用.attr('checked') == false。这种方法更易读和美观。 - sharat87

4

在jQuery 1.6之前，attr 是可以的，但是在1.6版本及以后，必须使用 prop。

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

属性和特性是不同的东西，但不幸的是，jQuery花了很长时间才区分它们。

参见: .prop() vs .attr()

- Ciro Santilli OurBigBook.com

2

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

点击这里查看。

- S L

1

试试这个方法

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

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

- Shaitender Singh

1

试试这个

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

- AnnMary

-1

将以下代码添加到按钮#postme的点击事件中，用于检查复选框是否被选中。如果它被选中，返回false，否则返回true。

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

- Andrew Jackman

他想要禁用按钮 - 这仍然允许用户点击该按钮。 - patmortech

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JohnP · Accepted Answer

你应该检查属性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 将绑定到尚未加载的 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元素上。