[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);

 

+ 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()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]

3, Tham khảo

Tấn Việt

Tôi lập trang web này để thỏa mãn sở thích viết cái gì đó vui vui khi rãnh rỗi và đồng thời cũng chia sẻ những gì tôi biết hoặc đọc đâu đó trên mạng về Lập trình web. Tôi hi vọng những bài viết này sẽ giúp ích cho các bạn. Thân ái!

You may also like…

1 Response

  1. Tồ says:

    Hay quá!Thanks for your sharing!