单击复选框以禁用按钮

Click Checkbox to disabled button

本文关键字：按钮 复选框 单击      更新时间：2023-09-26

我想禁用按钮发送表单，直到复选框被设置，我想用一个很好的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/>

其实很简单:

$('#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阅读更多

使用prop()代替attr:

。

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

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

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

注意，您的示例可以简化为仅传递一个布尔表达式用于开/关:

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