[jQuery] Disable/enable form elements (input, checkbox, radio…)

Đôi khi trong một form nào đó, bạn sẽ không cho phép/cho phép (disable/enable) người dùng nhập nội dung vào một thẻ input/radio/checkbox nào đó và trong bài viết hôm nay tôi sẽ tổng hợp một số cách giúp các bạn có thể disable/enable một phần tử bất kì với jQuery.

Để disable/enable một phần tủ bất kỳ với jQuery thì chúng ta sẽ sử dụng hàm attr() để can thiệp vào thuộc tính disabled.

1, Disable/enable element

Dưới đây là đoạn code mà tôi sử dụng

/* To disable element */
$('#element').attr('disabled', 'disabled');
// or
$('#element').attr('disabled', true);
/* To enable element */
$('#element').removeAttr('disabled');
// or
$('#element').attr('disabled', '');
// or
$('#element').attr('disabled', false);

best porn ai tool 2024

+ Ngoài ra với jQuery 1,6+ (phiên bản jQuery 1,6 trở lên) bạn có thể sử dụng hàm prop() — có chức năng tương tự như hàm attr()

/* To disable element */
$('#element').prop('disabled', true);
/* To enable element */
$('#element').prop('disabled', false);

+ Trong thời gian tìm hiểu jQuery, tôi cũng rút ra 1 thủ thuật nhỏ để disable/enable element. Đó là sử dụng hàm focus() và blur(). Cụ thể là nếu đối tượng được chọn là 1 input, khi người dùng click vào input đó thì hàm focus() sẽ được thực thi, ngược lại người dùng click bên ngoài input dó thì hàm blur() sẽ thực hiện.

/* To disable element */
$('#element').focus(function(){
$(this).blur();
});

Và đây là một ví dụ mà bạn có thể tham khảo khi áp dụng disable/enable trong form của mình:

http://www.worldoweb.co.uk/2011/jquery-disable-and-enable-form-elements-using-a-checkbox

2, Mở rộng

Sau đây là 1 số selector hữa ích khi làm việc với các control HTML (input, button…). Bạn không cần phải nhớ hết, chỉ cần đọc sơ qua biết cho có, còn khi cần đến thì sử dụng.

Thuộc tính	Mô tả
:selected	Chọn tag < option> được thiết lập là selected (tag < option> là thường là tag con của < select>)
:submit	Tương đương với chọn tag button[type=submit] hoặc input[type=submit]
:text	Tương đương với chọn tag input[type=text]
:visible	Chọn các element visible
:button	Chọn tag input[type=submit], input[type=reset], input[type=button] hoặc < button>
:checkbox	Tương đương với chọn tag input[type=checkbox]
:checked	Chọn các thẻ radio hay checkbox được thiết lập là đã checked
:disabled	Chọn các element bị disable
:enabled	Ngược lại “:disabled”. Chọn các element đang enable
:file	Tương đương với chọn tag input[type=file]
:header	Chọn các element là header từ < h1> đến < h6>
:hidden	Tương đương với chọn tag input[type=hidden]
:image	Tương đương với chọn tag input[type=image]
:input	Chọn form elements (input, select, textarea, button)
:parent	Chọn các element, mà element đó con (kể cả text), trừ empty elements (là các element không có tag đóng)
:password	Tương đương với chọn tag input[type=password]
:radio	Tương đương với chọn tag input[type=radio]
:reset	Chọn các thẻ input[type=reset] hoặc button[type=reset]