jQuery :enabled 選擇器



jQuery 中的 :enabled 選擇器用於選擇所有啟用的表單元素(例如 <input>、<select>、<textarea> 和 <button>)。

語法

以下是 jQuery 中 :enabled 選擇器的語法:

$(":enabled")

引數

以下是此方法的引數:

  • ":enabled" − 此選擇器選擇文件中的所有啟用元素。

示例 1

在下面的示例中,我們演示瞭如何將 ":enabled" 選擇器與輸入元素一起使用:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("input:enabled").css("background-color", "lightgreen");
        });
    </script>
</head>
<body>
    <form>
        <label for="name">Name:</label>
        <input type="text" id="name" value="John Doe"><br><br>
        <label for="email">Email:</label>
        <input type="text" id="email" value="john@example.com" disabled><br><br>
        <label for="phone">Phone:</label>
        <input type="text" id="phone" value="123-456-7890"><br><br>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

執行上述程式後,所有啟用的輸入欄位將以淺綠色背景突出顯示。停用的電子郵件輸入將不會突出顯示。

示例 2

在此示例中,我們演示瞭如何將 ":enabled" 選擇器與輸入元素一起使用:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button:enabled").css("color", "blue");
        });
    </script>
</head>
<body>
    <form>
        <button type="button" id="btn1">Button 1</button>
        <button type="button" id="btn2" disabled>Button 2</button>
        <button type="button" id="btn3">Button 3</button>
    </form>
</body>
</html>

執行上述程式後,所有啟用的按鈕將以藍色突出顯示。停用的按鈕將不會突出顯示。

jquery_ref_selectors.htm
廣告