单击复选框以禁用按钮

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 环境和使用简单 vanilla JS read more 可用的 DOM 属性。

Answer 2

使用prop() 代替 attr：

例如

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

属性通常会影响 DOM 元素的动态状态，而无需 更改序列化的 HTML 属性。示例包括值 输入元素的属性，输入的禁用属性和 按钮，或复选框的选中属性。 .prop() 方法 应该用于设置禁用和检查而不是 .attr() 方法。 .val() 方法应该用于获取和设置 价值。

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

请注意，您的示例可以简化为只为开/关传递一个布尔表达式：

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