javascript - 如果复选框处于打开状态，则不会启用按钮

Question

我只想在选中复选框时启用按钮。我在这里做错了什么？提前致谢..

index.html

<p><input id="agree" type="checkbox" /> I agree</p>
<input id="continue" value="continue" type="button" disabled="disabled" />

自定义.js

$( document ).ready(function () {
    $('#agree').change(function () {
        var state = $(this).attr('value');

        if (state == 'on') {
            $('#continue').removeAttr('disabled')
        } else if (state == '') {
            $('#continue').attr('disabled','disabled');
        }
    });
});

Answer 1

您可以将其简化为以下内容:

Example Here

$('#agree').on('change', function () {
    $('#continue').attr('disabled', !this.checked);
});

$('#agree').on('change', function () {
    $('#continue').attr('disabled', !this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><input id="agree" type="checkbox" />I agree</p>
<input id="continue" value="continue" type="button" disabled="disabled" />

您的代码无法正常工作的原因是您使用了 .attr()。由于没有 value 属性，您需要使用 .prop()。这仍然行不通，因为该值将始终返回 on。您需要获取访问 this.checked 或 .prop('checked') 的 checked 属性 - working example using your original snippet .

$('#agree').on('change', function () {
    if (this.checked) {
        $('#continue').removeAttr('disabled')
    } else {
        $('#continue').attr('disabled', 'disabled');
    }
});