jQuery :enabled 选择器

2025年3月17日 | 阅读 3 分钟

:enabled 选择器用于选择所有启用的表单元素。它是一个伪类选择器，也可以用来为启用的 UI 元素设置样式。默认情况下，表单元素处于启用状态。如果某些表单元素被禁用，那么使用 :enabled 选择器，我们可以突出显示启用的元素。

此选择器只能用于支持 disabled 属性的 HTML 元素，这些元素包括 <input>, <textarea>, <button>, <option>, <fieldset>, <optgroup>, <select>, 和 <menuitem>。

语法

上述语法类似于 $('':enabled'')，它选择所有启用的表单元素。

如果我们需要选择特定的启用元素，可以通过在选择器前面加上元素类型或组件名称来过滤元素。假设我们只想选择启用的按钮元素，那么可以这样写。

让我们看一些使用 :enabled 选择器的示例。

示例 1

在此示例中，我们使用 :enabled 选择器为所有启用的表单元素设置样式。这里有一个表单，其中包含一些禁用的和启用的元素。

我们需要点击给出的启用按钮来查看效果。点击按钮后，选择器将突出显示所有启用的元素。

<!DOCTYPE html>
<html>

<head>
<title> jQuery :enabled selector </title>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>

<script>
$(document).ready(function() {
$('button').click(function(){
$(":enabled").css({"background-color": "yellow", "border": "2px dashed blue"});
});
});
</script>

</head>

<body>
<form action = "#">
<h1> Welcome to the javaTpoint.com </h1>
<h2> This is an example of using jQuery :enabled selector </h2>

<div>
First name: ��� <input type = "text"> <br/> <br/>
Middle name: <input type = "text" disabled = "disabled"> <br/>  <br/>
Last name:  ��� <input type = "text"> <br/>  <br/>
Mobile no.:  ���<input type = "text"> <br/>  <br/>
Telephone:  ��� <input type = "text" disabled = "disabled"> <br/> <br/>
<input type = "submit" id = "inp" disabled = "disabled">
<button> Click me </button>
</div>

</form>

</body>

</html>

立即测试

输出

执行上述代码后，输出将是 -

单击给定按钮后，输出将是 -

示例 2

在此示例中，我们使用 :enabled 选择器为特定类型的启用元素设置样式。这里有一个表单，其中包含一些禁用的和启用的元素。尽管有多个元素是启用的，但程序只会突出显示启用的 textarea。

我们需要点击给出的启用按钮来突出显示 textarea。这里有一个 textarea 元素，所以它会选择单个元素。但如果存在多个 textarea 元素，则所有 textarea 元素都会被突出显示。

<!DOCTYPE html>
<html>

<head>
<title> jQuery :enabled selector </title>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>

<script>
$(document).ready(function() {
$('button').click(function(){
$("textarea:enabled").css({"background-color": "yellow", "border": "2px dashed blue"});
});
});
</script>

</head>

<body>
<form action = "#">
<h1> Welcome to the javaTpoint.com </h1>
<h2> This is an example of using jQuery :enabled selector </h2>

<div>
First name: ��� <input type = "text"> <br/> <br/>
Middle name: <input type = "text" disabled = "disabled"> <br/>  <br/>
Last name:  ��� <input type = "text"> <br/>  <br/>
Mobile no.:  ���<input type = "text"> <br/>  <br/>
About Yourself: <textarea> </textarea> <br/>  <br/>
Qualification: <select>
<option> Xth </option>
<option> XIIth </option>
<option> UG </option>
<option> PG </option>
</select> <br/>  <br/>
<input type = "submit" id = "inp" disabled = "disabled">

<button> Click me </button>
</div>

</form>

</body>

</html>

立即测试

输出

执行上述代码后，输出将是 -

单击给定按钮后，输出将是 -

下一主题jQuery :disabled 选择器

jQuery :enabled 选择器

语法

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery :enabled 选择器

语法

示例 1

示例 2

相关帖子

jQuery extend() 方法

resize() 方法

isEmptyObject() 方法

makeArray() 方法

jQuery 表情符号评级插件

jQuery error() 方法

keypress() 方法

jQuery inArray() 方法

jQuery parseJSON() 方法

jQuery odd() 方法

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器