/disabled selector trong JQuery
Các hàm built-in03/10/2023

disabled selector trong JQuery

Lựa chọn disabled selector hay “:disabled” là một trong các loại Selectors cơ bản được cung cấp sẵn trong thư viện jQuery được thiết kế để chọn tất cả các phần tử mà đã bị vô hiệu hóa (disabled).

“disabled” là một thuộc tính HTML. Thuộc tính này thường được sử dụng để vô hiệu hóa một phần tử HTML như button, input, select, textarea, và một số phần tử khác trên trang web.

Khi một phần tử có thuộc tính “disabled” được thiết lập, phần tử đó sẽ trở thành không hoạt động hoặc không thể tương tác với người dùng.

Ví dụ, một nút bấm (button) với thuộc tính “disabled” sẽ không thể được nhấn và không thực hiện bất kỳ hành động nào mà nó đã được thiết lập để thực hiện.

1. Cú pháp disabled selector

Cú pháp

$(":disabled")

Hoặc

jQuery(":disabled")

Kết quả trả về:

  • Selector “:disabled” trả về tất cả các phần tử mà đã bị vô hiệu hóa, ví dụ như các phần tử input, button, select, textarea, và các phần tử khác hỗ trợ thuộc tính “disabled”.

Phiên bản hỗ trợ:

  • Selector “:disabled” đã được thêm vào jQuery từ phiên bản 1.0.

Ghi chú:

  • Nên kèm theo tên thẻ hoặc một selector khác trước selector “:disabled”, hoặc sử dụng selector cụ thể như $(‘input:disabled’), để tránh sử dụng universal selector (“*”). Sử dụng $(‘input:disabled’) thay vì $(‘:disabled’) để tăng hiệu suất.
  • “:disabled” khác với [disabled] attribute selector; “:disabled” chọn các phần tử đã thực sự bị vô hiệu hóa, trong khi [disabled] chỉ kiểm tra sự tồn tại của thuộc tính disabled.
  • Selector “:disabled” chỉ nên được sử dụng để chọn các phần tử HTML hỗ trợ thuộc tính disabled như <button>, <input>, <optgroup>, <option>, <select>, <textarea>, <menuitem>, và <fieldset>.
disabled selector trong JQuery

2. Một số ví dụ

2.1. Sử dụng $(‘input:disabled’) và $(‘:disabled’) để lấy phần tử

Dưới đây là ví dụ sử dụng $('input:disabled') và $(':disabled') để lấy các phần tử bị vô hiệu hóa (disabled):

<!DOCTYPE html>
<html>
<head>
  <title>Disabled Selector Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<input type="text" disabled value="kienthuctoantap.com">
<input type="text">
<button disabled>Click me</button>
<button>Click me too</button>

<script type="text/javascript">
  $(document).ready(function() {
    const inputDisabledElements = $('input:disabled');
    console.log('Using input:disabled to select input elements that are disabled:');
    console.log(inputDisabledElements);

    const disabledElements = $(':disabled');
    console.log('\nUsing :disabled to select all elements that are disabled:');
    console.log(disabledElements);
  });
</script>

</body>
</html>

Trong ví dụ này, chúng ta sử dụng $('input:disabled') để chọn các phần tử input đã bị vô hiệu hóa và $(':disabled') để chọn tất cả các phần tử đã bị vô hiệu hóa.

Khi bạn mở trang web và xem console trong Developer Tools của trình duyệt, bạn sẽ thấy các phần tử bị vô hiệu hóa được in ra trong console dựa trên hai selector khác nhau.

2.2. Các phần tử HTML hỗ trợ thuộc tính disabled

Để minh họa rõ ràng hơn về việc sử dụng :disabled selector chỉ trên các phần tử HTML hỗ trợ thuộc tính disabled, chúng ta sẽ tạo các ví dụ với các loại phần tử đó.

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>:disabled Selector Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>

<h1>Disabled Button</h1>
<button disabled>Disabled Button</button>

<h1>Disabled Input</h1>
<input type="text" disabled placeholder="Disabled Input">

<h1>Disabled Select</h1>
<select disabled>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<h1>Disabled Textarea</h1>
<textarea disabled placeholder="Disabled Textarea"></textarea>

<h1>Disabled Optgroup</h1>
<optgroup label="Disabled Group" disabled>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</optgroup>

<!-- Phần tử không hỗ trợ thuộc tính disabled -->
<h1>Not Disabled</h1>
<span>Not Disabled</span>

<script type="text/javascript">
  $(document).ready(function() {
    const disabledElements = $(':disabled');
    console.log('Using :disabled selector to select elements that are disabled:');
    console.log(disabledElements);

    // Add class to elements that are actually disabled and supported elements
    disabledElements.addClass('highlight');
  });
</script>

</body>
</html>

Trong ví dụ này, chúng ta sử dụng :disabled selector để chọn các phần tử thực sự đã bị vô hiệu hóa và hỗ trợ thuộc tính disabled như <button>, <input>, <select>, <textarea>, <optgroup>.

Chúng ta thêm lớp CSS “highlight” để làm nổi bật các phần tử này. Các phần tử không hỗ trợ thuộc tính disabled (như <span>) sẽ không bị ảnh hưởng.

Related posts