javascript - 单击文本框后启用提交按钮

Question

单击复选框后，我有以下代码用于启用提交按钮。

HTML：

<input type="checkbox" checked="checked" id="check"><a href="#">terms and conditions</a>
<input type="submit" name="submit" id="post" value="submit">

脚本：

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

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

但这在我的本地主机中不起作用。即使未选中复选框，该按钮也始终处于启用状态。请帮助我使它工作。

Answer 1

$('#check').click(function() {
    $('#post').prop('disabled', !$(this).is(':checked'));
}

.attr()检查 HTML 中的属性，而不是 HTML 的当前状态；.is(':checked')测试后者。另外，我认为最好使用.prop()动态更改元素的禁用状态。

Answer 2

$(this).attr('checked') 将永远为真，它只是读取“checked” attr 值，

利用

this.checked

或者

$(this).prop('checked')

看到这个：http: //jsfiddle.net/m6aBZ/

Answer 3

如果您选中它会禁用它，然后取消选中该复选框吗？如果是这样，那么您只需将禁用设置为默认状态。

Answer 4

很多答案。

不要调用任何表单控件“提交”，因为它会影响表单的提交方法（即form.submit引用控件，而不是方法）。

您所需要的只是：

<form ...>
  <input type="checkbox" onclick="this.form.submitButton.disabled = !this.checked" ...>
  <input type="submit" name="submitButton" disabled>
</form>

Answer 5

利用.is(':checked')

$('#check').click(function() {
    if(!$(this).is(':checked')) {
        $('#post').attr("disabled","disabled");   
    } else {
        $('#post').removeAttr('disabled');
    }
});

Answer 6

这是小提琴

这是使用它的javascript

$(function(){
$('#check').click(function(){
    if($(this).attr('checked')!="checked"){
        $("#post").attr("disabled","disabled");

    } else {
        $("#post").removeAttr("disabled");
    }
});
});