如何使用 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 单选按钮，并且通过 .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 的基础知识并探索其功能，您可以开启一个充满可能性的世界，创建引人入胜且动态的网页，从而带来愉悦的用户体验。
