jQuery 禁用和启用输入

当前位置：主页 > 学无止境 > WEB前端 >

Vue React JavaScript Angular CSS HTML

jQuery 禁用和启用输入

作者：迹忆客最近更新：2023/03/13 浏览次数：

启用和禁用输入字段是使用 jQuery 的简单操作。本教程演示如何禁用或启用 jQuery 中的输入字段。

jQuery 禁用输入

prop() 方法可以使用 jQuery 禁用输入。此方法的语法如下所示。

prop("disabled", true)

它有两个参数，值 disabled，设置为 true。让我们尝试一个 prop() 方法的示例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Disable Enable Input with jQuery</title>
    <style>
    label {
        display: block;
        margin: 10px 0;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
    $(document).ready(function(){
        $(".disable").click(function(){
            if($(this).prop("checked") == true){
                $('form input[type="text"]').prop("disabled", true);
            }
        });
    });
    </script>
</head>
<body>
    <form>
        <label><input type="checkbox" class="disable"> Check the box to disable the input fields below</label>
        <label>Name: <input type="text" name="username"></label>
        <label>ID: <input type="text" name="username"></label>
        <label>Address: <input type="text" name="username"></label>

    </form>
</body>
</html>

一旦我们选中该框，上面的代码将禁用输入。见输出：

jQuery 禁用输入

jQuery 启用输入

同样，prop 方法也用于启用 jQuery 中的输入。启用输入的语法将是：

prop("disabled", false)

其中参数 true 将更改为 false，让我们尝试一个示例来启用输入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Disable Enable Input with jQuery</title>
    <style>
    label {
        display: block;
        margin: 10px 0;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
    $(document).ready(function(){
        $('form input[type="text"]').prop("disabled", true);
        $(".disable").click(function(){
            if($(this).prop("checked") == true){
                $('form input[type="text"]').prop("disabled", false);
            }
        });
    });
    </script>
</head>
<body>
    <form>
        <label><input type="checkbox" class="disable"> Check the box to enable the input fields below</label>
        <label>Name: <input type="text" name="username"></label>
        <label>ID: <input type="text" name="username"></label>
        <label>Address: <input type="text" name="username"></label>

    </form>
</body>
</html>