数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 jQuery 启用/禁用按钮？
除了事件处理、CSS 动画和 Ajax 之外，jQuery 还是一个轻量级的 JavaScript 框架，旨在简化 HTML DOM 树的遍历和操作。它以遵循“少写多做”的格言而闻名。开发人员使用 jQuery 的各种工具和功能来修改 HTML 文件、处理 AJAX 调用、管理事件和创建动画。
我们将使用 prop() 函数和 attr() 函数在 JQuery 中启用或禁用按钮。
方法 -1：满足条件时启用按钮
在此示例中，我们将了解如何在选中单选框时启用按钮。
算法
步骤 1：通过 script 标签导入 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>
在此示例中，我们检查对单选按钮输入的每次点击。如果选中 option1 单选按钮（在 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() 函数检查文本输入是否为空，该函数返回文本输入字段的当前值。如果为空，则将 disabled 属性保持为 true，反之亦然。
结论
jQuery 提供了一种快速有效的方法来激活或停用网页上的按钮，具体取决于用户输入和其他因素。通过使用 prop() 和 attr() 函数更改按钮元素的 disabled 属性，除非满足必要的条件，否则用户无法单击按钮。这可以通过减少错误和提供实时反馈来增强用户体验。
此外，jQuery 还提供各种其他功能和特性，可用于增强网页的响应能力和交互性。这些功能从管理表单提交和 AJAX 查询到生成动画和效果。通过掌握 jQuery 的基础知识并探索其功能，您可以打开一个创建引人入胜和动态网页的世界，从而带来愉悦的用户体验。
3K+ 阅读量
