2009-04-23 29 views
15

Tôi có 2 <fieldset> giây trên trang của mình, nhưng một trong số chúng phải tắt tất cả các phần tử tùy thuộc vào sự lựa chọn của một số người dùng.Làm cách nào để vô hiệu hóa tất cả các phần tử bên trong một fieldset trong jQuery?

Các trường có chứa đầu vào văn bản, lựa chọn và liên kết. Có cách nào để vô hiệu hóa tất cả chúng thay vì vô hiệu hóa chúng từng cái một không?

Trả lời

23

Điều gì về việc sử dụng bộ chọn trẻ em?

$("#myfieldeset").children().attr("disabled", "disabled"); 

Bạn cũng có thể lọc những đứa trẻ lựa chọn:

$("#myfieldeset").children("a,input"); 
+0

Cảm ơn !! Tôi đã sử dụng một cái gì đó tương tự nhưng lời giải thích của bạn sẽ hữu ích cho những thứ khác mà tôi đã làm! :-) – AndreMiranda

+6

như jquery 1.6, [nên sử dụng '.prop()' thay vì '.attr()' để đặt giá trị của thuộc tính] (http://api.jquery.com/prop/#prop2), điều này có thể giống như: '.prop (" disabled ", true)' –

+0

Tôi nhận thấy rằng nếu phần tử fieldset cha bị vô hiệu hóa, thì tất cả các phần tử con sẽ bị vô hiệu hóa, ngay cả khi có phần tử fieldset được kích hoạt. Đây có phải là lỗi tính năng không? – tarekahf

3

Giả sử bạn thiết lập một class = "disableMe" trên fieldset bạn muốn vô hiệu hóa bất kỳ yếu tố đầu vào sau đó đoạn mã sau nên làm những gì bạn cần :

$('fieldset.disableMe :input').attr('disabled', true) 
0

Nếu vì một số lý do bạn không thể thêm một ID để các fieldset (mà thường ưa thích), bạn luôn có thể làm điều này để ẩn tất cả các yếu tố đó là trẻ em:

$('fieldset:first > *').attr('disabled','disabled'); 
2

Tại sao bạn không chỉ cần sử dụng:

$("#myfieldeset").attr("disabled", "disabled");

Nó làm việc cho tôi. Nó vô hiệu hóa độc đáo tất cả các trẻ em đầu vào.

CHỈNH SỬA: lưu ý rằng thuộc tính đã tắt có thể được áp dụng cho phần tử fieldset chỉ trong HTML5 (xem bình luận merryprankster). Thật kỳ lạ, nó hoạt động với các trình duyệt khác ngoài Firefox và Opera, chẳng hạn như Chrome và Internet Explorer (thử nghiệm IE7 và IE8).

+0

Đó là HTML5, phải không? – merryprankster

+0

Không. Thuộc tính đã tắt ngày trở về html 4. Nguồn: [disabled attribute] (http://www.w3schools.com/tags/att_input_disabled.asp) – franzlorenzon

+2

không phải là . Liên kết của bạn có khoảng yếu tố;
s không có thuộc tính 'disabled' trước HTML5 (và hỗ trợ có vẻ rất hạn chế). [Nguồn] (http://w3schools.com/HTML5/att_fieldset_disabled.asp) – merryprankster

0

Hãy thử đoạn mã này:

$("#myfieldeset").attr("disabled", "disabled"); 
2

Ngoài những gì người khác đã đăng:

Sử dụng .prop() thay vì .attr():

$('#myfieldset').prop('disabled',true) 

Đó là chính xác hơn đối với DOM với.

Và nó có vẻ không hoạt động tốt với xác thực. Cả firefox và chrome sẽ không cho phép tôi gửi biểu mẫu Với đầu vào 'bắt buộc' chưa được điền trong trường dữ liệu bị vô hiệu hóa, nhưng không đưa ra bất kỳ hướng dẫn nào về cách hoàn thành biểu mẫu.

6

Bạn có thể đặt thuộc tính disabled của fieldset.

Từ MDN:

Nếu thuộc tính Boolean này được thiết lập, điều khiển hình thức mà là hậu duệ của nó, ngoại trừ con cháu của nguyên tố tùy chọn đầu tiên của mình, bị vô hiệu hóa, tức là không thể chỉnh sửa. Họ sẽ không nhận được bất kỳ sự kiện duyệt web nào, chẳng hạn như nhấp chuột hoặc tập trung vào các sự kiện có liên quan. Thường thì các trình duyệt hiển thị các điều khiển như màu xám.


HTML: <fieldset disabled> ... </fieldset>

JQuery: $('#myfieldset').prop('disabled', true);

JS: document.getElementById('#myFieldset').disabled = true;


Lưu ý quan trọng: Điều này không hoạt động đúng trên Internet Explorer do một vài lỗi, nhưng hoạt động tốt ở mọi nơi khác (bao gồm Cạnh).

Bugs

IE: 1, 2

tl; dr: Text và File đầu vào không đúng cách vô hiệu hóa, và người dùng vẫn có thể tương tác với họ

Nếu đây là một đối phó breaker, bạn cần phải đi vào fieldset và đặt disabled trên con cháu của nó như được mô tả trong các câu trả lời khác ở đây.


Trình duyệt thông tin hỗ trợ: http://caniuse.com/#feat=fieldset-disabled

Các vấn đề liên quan