/enabled selector trong JQuery
Các hàm built-in09/10/2023

enabled selector trong JQuery

Lựa chọn enabled selector (:enabled) là một trong các loại Selectors cơ bản được cung cấp sẵn trong thư viện jQuery được sử dụng để lọc và chọn tất cả các phần tử mà có trạng thái “enabled”, tức là có khả năng tương tác với người dùng.

Phần tử mà có trạng thái “enabled” là các phần tử trong HTML có khả năng tương tác hoặc kích hoạt. Trạng thái “enabled” ám chỉ rằng phần tử đó có thể nhận sự tương tác từ người dùng, chẳng hạn như nhấp chuột, nhập dữ liệu, hoặc được chọn.

Các phần tử có trạng thái “enabled” thường được sử dụng để đại diện cho các phần tử mà người dùng có thể tương tác hoặc thực hiện hành động.

Ví dụ, các phần tử <button>, <input>, <select>, <textarea>, và một số phần tử khác có thể có trạng thái “enabled” khi chúng đang cho phép người dùng tương tác.

1. Cú pháp

Trong ngữ cảnh của CSS và jQuery, bạn có thể sử dụng pseudo-class selector :enabled để chọn tất cả các phần tử mà có trạng thái “enabled”.

Ví dụ: $("input:enabled") sẽ chọn tất cả các phần tử <input> có trạng thái “enabled”.

Cú pháp:

jQuery( ":enabled" )

Hoặc

$( ":enabled" )

Tham số:

  • Không có tham số nào cần được truyền vào.

Kết quả trả về:

  • Kết quả trả về là tập hợp các phần tử mà có trạng thái “enabled”.

Phiên bản jQuery hỗ trợ:

  • Lựa chọn enabled selector đã được thêm vào jQuery phiên bản 1.0.
enabled selector trong JQuery

2. Một số ví dụ

2.1. Tìm kiếm các phần tử button, input, select, và textarea

Dươis đây là ví dụ sử dụng lựa chọn enabled selector để thao tác với các phần tử <button>, <input>, <select>, và <textarea> có trạng thái “enabled”:

<!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>:enabled Selector Example</title>
  <style>
    /* CSS để định dạng phần tử đã chọn */
    .highlighted {
      color: white;
      background-color: green;
      border: 2px solid black;
    }
  </style>
</head>
<body>

  <button disabled>Disabled Button</button> <!-- Phần tử không enabled -->
  <button>Enabled Button</button> <!-- Phần tử enabled -->

  <br><br>

  <input type="text" disabled value="Disabled Input"> <!-- Phần tử không enabled -->
  <input type="text" value="Enabled Input"> <!-- Phần tử enabled -->

  <br><br>

  <select disabled>
    <option value="1">Option 1</option> <!-- Phần tử không enabled -->
    <option value="2">Option 2</option> <!-- Phần tử không enabled -->
  </select>
  <select>
    <option value="1">Option 1</option> <!-- Phần tử enabled -->
    <option value="2">Option 2</option> <!-- Phần tử enabled -->
  </select>

  <br><br>

  <textarea disabled>Disabled Textarea</textarea> <!-- Phần tử không enabled -->
  <textarea>Enabled Textarea</textarea> <!-- Phần tử enabled -->

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // Thao tác với các phần tử enabled
    $("button:enabled, input:enabled, select:enabled, textarea:enabled").addClass("highlighted");
  </script>

</body>
</html>

Trong ví dụ này, chúng ta có các phần tử <button>, <input>, <select>, và <textarea> được thêm trạng thái enabled và disabled. Bằng cách sử dụng lựa chọn enabled selector :enabled, chúng ta thao tác với các phần tử enabled và đặt màu nền cho chúng.

2.2. Trò chơi Rock-Paper-Scissors Game

Dưới đây là cách tạo trò chơi “Búa, Bao, Kéo” (Rock-Paper-Scissors Game) với yêu cầu của bạn sử dụng HTML, CSS và sử dụng enable Selector của thư viện JQuery:

htmlCopy code

<!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>Rock-Paper-Scissors Game</title>
  <style>
    /* CSS để định dạng phần tử */
    .game-container {
      display: flex;
      justify-content: space-around;
      margin-top: 50px;
    }

    .choice {
      font-size: 24px;
      font-weight: bold;
      padding: 20px;
      border: 2px solid #000;
      display: inline-block;
      transition: color 0.5s;
      margin-bottom: 10px;
    }

    .player1 {
      border-color: blue;
    }

    .player2 {
      border-color: red;
    }

    .player1.active {
      color: blue;
    }

    .player2.active {
      color: red;
    }
  </style>
</head>
<body>

  <h1>Rock-Paper-Scissors Game</h1>

  <div class="game-container">
    <div>
      <h2>Player 1</h2>
      <div id="player1Choice" class="choice player1">Choose...</div>
    </div>
    <div>
      <h2>Player 2</h2>
      <div id="player2Choice" class="choice player2">Choose...</div>
    </div>
  </div>

  <br><br>

  <button id="playButton" onclick="startGame()">Play Game</button>

  <script>
    function startGame() {
      // Disable play button
      document.getElementById("playButton").disabled = true;

      // Enable choices divs
      document.querySelectorAll(".choice:enabled").forEach(function(choice) {
        choice.innerText = "Choose...";
      });

      // Choices for each player
      var choicesPlayer1 = ["Rock", "Paper", "Scissors"];
      var choicesPlayer2 = ["Rock", "Paper", "Scissors"];

      var intervalId = setInterval(function() {
        // Randomly change choices every 1 second for each player
        var player1Index = Math.floor(Math.random() * 3);
        var player2Index = Math.floor(Math.random() * 3);

        document.getElementById("player1Choice").innerText = choicesPlayer1[player1Index];
        document.getElementById("player2Choice").innerText = choicesPlayer2[player2Index];

        // Toggle active class for styling
        document.getElementById("player1Choice").classList.toggle("active");
        document.getElementById("player2Choice").classList.toggle("active");
      }, 1000);

      // End the game after 10 seconds
      setTimeout(function() {
        clearInterval(intervalId);

        // Determine the winner
        var player1Choice = document.getElementById("player1Choice").innerText;
        var player2Choice = document.getElementById("player2Choice").innerText;

        // Display choices and result
        document.getElementById("player1Choice").innerText = "Player 1 choice: " + player1Choice;
        document.getElementById("player2Choice").innerText = "Player 2 choice: " + player2Choice;

        var result;
        if (player1Choice === player2Choice) {
          result = "It's a tie!";
        } else if (
          (player1Choice === "Rock" && player2Choice === "Scissors") ||
          (player1Choice === "Paper" && player2Choice === "Rock") ||
          (player1Choice === "Scissors" && player2Choice === "Paper")
        ) {
          result = "Player 1 wins!";
        } else {
          result = "Player 2 wins!";
        }

        // Display the result
        var resultElement = document.createElement("div");
        resultElement.innerText = result;
        document.body.appendChild(resultElement);

        // Enable play button for the next round
        document.getElementById("playButton").disabled = false;
      }, 10000);  // Game ends after 10 seconds
    }
  </script>

</body>
</html>

Trong ví dụ này, khi người chơi nhấn nút “Play Game”, nút sẽ bị vô hiệu hóa trong suốt 10 giây. Trong thời gian này, hai Player 1 và Player 1 sẽ thay đổi giá trị mỗi một giây.

Related posts