🌈 搜索
📅 最后修改于: 2020-11-27 01:04:29 🧑 作者: Mango
：enabled选择器用于选择所有启用的表单元素。它是一个伪类选择器，也可以用于设置已启用的UI元素的样式。默认情况下，表单元素处于启用状态。如果某些表单元素被禁用，则使用：enabled选择器，我们可以突出显示已启用的元素。
此选择器仅可用于支持以下禁用属性的HTML元素： ， ，<button>，<option>，<fieldset>，<optgroup>，<select>和<menuitem>。</ html></p> <h4>句法</h4> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span <="" span="" style="font-size: 10pt">$(":enabled") </span></code></pre> </div> <p>上面的语法类似于$(''*：enabled'')选择所有启用的表单元素。</p> <p>如果必须选择特定的启用元素，则可以通过为选择器添加元素类型或组件名称作为前缀来过滤元素。假设我们只需要选择已启用的按钮元素，则可以编写如下。</p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span <="" span="" style="font-size: 10pt">$("button:enabled") </span></code></pre> </div> <p>让我们看看使用：enabled选择器的一些说明。</p> <h4>例1</h4> <p>在这个例子中，我们使用：enabled选择器来样式化所有启用的表单元素。这里有一个表单，其中包括一些禁用和启用的元素。</p> <p>我们必须单击给定的启用按钮才能看到效果。单击按钮时，选择器将突出显示所有已启用的元素。</p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span <="" span="" style="font-size: 10pt"><!DOCTYPE html> <html> <head> <title> jQuery :enabled selector </title> <script src = "https://ajax.googleapis.com/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> </span></code></pre> </div> <p>输出：</p> <p>执行完上述代码后，输出将为-</p> <p><img class="img-fluid" src="https://mangdo-1254073825.cos.ap-chengdu.myqcloud.com/front_eng_imgs/javatpoint/javatpoint/jquery-enabled-selector1.png"/></p> <p>点击给定的按钮后，输出将是-</p> <p><img class="img-fluid" src="https://mangdo-1254073825.cos.ap-chengdu.myqcloud.com/front_eng_imgs/javatpoint/javatpoint/jquery-enabled-selector2.png"/></p> <h4>例2</h4> <p>在这个例子中，我们使用：enabled选择器来设计特定类型的启用元素。这里有一个表单，其中包括一些禁用和启用的元素。尽管启用了多个元素，但是该程序将仅突出显示已启用的文本区域。</p> <p>我们必须单击给定的启用按钮以突出显示文本区域。只有一个textarea元素，因此它将选择单个元素。但是，如果有多个textarea元素，则所有textarea元素都将突出显示。</p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span <="" span="" style="font-size: 10pt"><!DOCTYPE html> <html> <head> <title> jQuery :enabled selector </title> <script src = "https://ajax.googleapis.com/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> Qualification: Xth XIIth UG PG Click me