单击复选框以禁用按钮

Question

我想禁用按钮以发送表单，直到选中复选框为止，并且我想用一个不错的简短jQuery代码来解决它。 但是必须有一个错误，什么也不会发生。 有人有主意吗？

JS：

$(document).ready(function(){
$('#terms').keyup(function(){
    if($('#terms').is(':checked')){
          $('#btn').removeAttr('disabled');
    }else{
        $('#btn').attr('disabled');
}})}

HTML：

<input id="terms" type="checkbox" value="" name="terms">
    <input id="btn"   name="register" type="button" value="Register" disabled/>

Answer 1

其实很简单：

 $('#terms').on("change", function() { $("#btn").prop("disabled", !this.checked); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="terms" type="checkbox" value="" name="terms"> <input id="btn" name="register" type="button" value="Register" disabled/> 

其中!this.checked是当前复选框状态的布尔值。
当然有一个jQuery的方法： $(this).is(":not(:checked)")但没有必要，因为你应该习惯了解this环境和DOM属性你可以使用简单的香草 JS 读更多 。

Answer 2

使用prop（）代替attr：

例如

$('#btn').prop('disabled', true);

属性通常会在不更改序列化HTML属性的情况下影响DOM元素的动态状态。 示例包括输入元素的value属性，输入和按钮的Disabled属性或复选框的checked属性。 应该使用.prop（）方法而不是.attr（）方法来设置禁用和检查状态。 .val（）方法应用于获取和设置值。

注意：您正在使用keyup而不是复选框的change事件。

请注意，您的示例可以简化为只为on / off传递布尔表达式：

$(function(){
    $('#terms').change(function(){
        $('#btn').prop('disabled', !$(this).is(':checked'));
    });
});