jquery :enabled选择器

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

此选择器只能用于 HTML元素，这些元素支持
disabled 属性，这些属性为
<输入>，<textarea>，<button>，<option>，<fieldset>，<optgroup>，<select>，和
<menuitem> 。

语法

 $(":enabled")

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

如果我们必须选择特定的启用元素，我们可以通过为选择器添加元素类型或组件名称作为前缀来过滤元素。假设我们只需要选择已启用的按钮元素，则可以编写如下。

 $("button:enabled")

让我们看看使用
:enabled 选择器的一些说明。

Example1

使用
:enabled 选择器来样式化所有启用的表单元素。这里有一个表单，其中包含一些禁用和启用的元素。

我们必须单击给定的启用按钮才能看到效果。单击按钮时，选择器将突出显示所有已启用的元素。

 <!DOCTYPE html>
 <html>
 <head>
 <title> jQuery :enabled selector </title>
 <script src = "/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 bianchenghao6.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>

输出:

Welcome to the bianchenghao6.com

This is an example of using jQuery :enabled selector

First name:

Middle name:

Last name:

Mobile no.:

Telephone:

Example2

在此示例中，我们使用
: enabled 选择器。这里有一个表单，其中包括一些禁用和启用的元素。尽管启用了多个元素，但是该程序只会突出显示已启用的
textarea 。

我们必须单击给定的已启用按钮以突出显示
textarea 。只有一个textarea元素，因此它将选择单个元素。但是，如果有多个textarea元素，则所有textarea元素都将突出显示。

 <!DOCTYPE html>
 <html>
 <head>
 <title> jQuery :enabled selector </title>
 <script src = "/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 bianchenghao6.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>

输出:

Welcome to the bianchenghao6.com

This is an example of using jQuery :enabled selector

First name:

Middle name:

Last name:

Mobile no.:

About Yourself:

Qualification:

Jquery noConflict()方法

Jquery radio按钮