jQuery 如何启用/禁用按钮

除了事件处理、CSS动画和Ajax之外，jQuery是一个轻量级的JavaScript框架，旨在更容易遍历和操作HTML DOM树。它以“少写，做更多”的格言而闻名。开发人员使用各种工具和功能与jQuery一起来修改HTML文件、处理AJAX调用、管理事件和创建动画。

我们将使用prop()函数和attr()函数在jQuery中启用或禁用按钮。

方法1：满足条件时启用按钮

在这个例子中，我们将看到如何在选择了单选框时启用按钮。

步骤

步骤1： 通过脚本标签导入jQuery脚本。

步骤2： 定义单选框和val()函数以获取单选框的状态。

步骤3： 将一个函数传递给on()函数来检查当前单选按钮的状态。

步骤4： 使用prop()函数来改变按钮的状态。

语法

$('#myButton').prop('disabled', false);

在下面的例子中，prop函数被用于设置id为’myButton’的按钮的disabled属性值，这个例子中的值为false。

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enable/ Disable Button</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
    <h3>Select Option 1 to enable the button</h3>
    <div>
        <input type="radio" name="Option" value="Option 1" id="option1">Option 1 </input>
        <input type="radio" name="Option" value="Option 2" id="option2">Option 2 </input>
        <input type="radio" name="Option" value="Option 3" id="option3">Option 3 </input>
    </div>

    <button type="button" id="myButton" disabled>Toggle Button</button>

    <script>
         $("input[type='radio']").on("click", function(){ if($ ("#option1").is(':checked')){
                 $("#myButton").prop("disabled", false); }else{$ ("#myButton").prop("disabled", true);
            }
        });
    </script>
    <style>
        body{
            background-color: #8a2be2;
            color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: large;
        }
        h3{
            background-color: cadetblue;
            padding-left: 30px;
            padding-top: 20px;
            padding-bottom: 20px;
            border-radius: 20px;
        }
        div{
            margin-top: 20px;
            margin-bottom: 50px;
            padding-left: 30px;
        }
        #myButton{
            /* margin-left: 5%; */
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 75px;
            padding-right: 75px;
            border-radius: 15px;
            margin-left: 30px;
        }
    </style>
</body>
</html>

在这个例子中，我们检查每次单击单选按钮输入。如果选中了选项1单选按钮，该按钮将应用于if条件中的.is(“:checked”)，则使用prop()函数删除disabled属性，否则按钮将被禁用。

方法2：当输入条件满足时解锁按钮。

在这个方法中，我们将看到如何在输入文本字段不为空时启用按钮。

语法

$('#myButton').attr('disabled', true);

在这个代码段中，attr函数被用来设置id为’myButton’的按钮的disabled属性值，此时为true。

步骤

步骤1： 通过script标签导入jQuery脚本。

步骤2： 用input标签定义一个文本输入组件。

步骤3： 检查输入字段是否为空。

步骤4： 如果输入字段不为空，则启用该按钮，否则保持禁用状态。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enable/ Disable Button</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
    <h3>Enter something to enable the button</h3>
    <div>
        <input type="text" name="username" id="username" />
    </div>

    <button type="button" id="myButton" disabled>Toggle Button</button>

    <script>
         $("input[type='text']").keyup(function(){ if($ ("#username").val() !== ""){
             $("#myButton").attr("disabled", false); }else{$ ("#myButton").attr("disabled", true);
           }
        });
    </script>
    <style>
        body{
            background-color:chocolate;
            color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: large;
        }
        h3{
            background-color:burlywood;
            padding-left: 30px;
            padding-top: 20px;
            padding-bottom: 20px;
            border-radius: 20px;
        }
        div{
            margin-top: 20px;
            margin-bottom: 50px;
            padding-left: 30px;
        }
        input[type='text']{
            padding-top: 20px;
            padding-bottom: 20px;
            width: 330px;
            padding-left: 20px;
            font-size: xx-large;
        }
        #myButton{
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 140px;
            padding-right: 140px;
            border-radius: 15px;
            margin-left: 30px;
        }
    </style>
</body>
</html>

###

在这个代码中，我们看到了如何使用attr()函数来启用按钮。首先，我们使用val()函数检查文本输入是否为空，val()函数返回文本输入字段的当前值。如果为空，我们保持disabled属性为真，反之亦然。