Giá trị chính xác cho thuộc tính bị vô hiệu hóa là gì?


167

Giá trị chính xác cho disabledthuộc tính cho một hộp văn bản hoặc textarea là gì?

Tôi đã thấy những điều sau đây được sử dụng trước đây:

<input type="text" disabled />
<input type="text" disabled="disabled" />
<input type="text" disabled="true" />

5
Các thuộc tính phải có một giá trị, ngay cả đối với các thuộc tính có tín hiệu hiện diện đơn thuần phải làm gì đó. disabled="false"vẫn sẽ vô hiệu hóa phần tử, bởi vì đó là HIỆN TẠI của disabledđiều đó kích hoạt sự hư hỏng, không phải giá trị của thuộc tính.
Marc B

Liên kết tôi đã đăng dưới dạng nhận xét cho câu trả lời của js1568 xác nhận / làm rõ những gì @Marc B đang nói: whatwg.org/specs/web-apps/cien-work/multipage/ trộm
James Allardice

có thể trùng lặp stackoverflow.com/questions/1033944/ trên vì cả hai đều là thuộc tính boolean (không được gắn cờ)
Ciro Santilli 郝海东 冠状 病 六四

Câu trả lời:


148
  • Đối với XHTML, <input type="text" disabled="disabled" />là đánh dấu hợp lệ.
  • Đối với HTML5, <input type="text" disabled />hợp lệ và được W3C sử dụng trên các mẫu của họ.
  • Trong thực tế, cả hai cách hoạt động trên tất cả các trình duyệt chính.

15
Trong html5, đầu vào là một phần tử void và không cần một dấu gạch chéo tự đóng: w3.org/TR/html5/syntax.html#void-elementsw3.org/TR/html5/syntax.html#syntax-start- thẻ
Daniel

1
@Daniel K. Nó không cần nó, trừ khi thực hiện đánh dấu HTML / XML polyglot.
Patanjali

108

Thông số HTML5 :

http://www.w3.org/TR/html5/forms.html#eneac-and-diseac-form-controls:-the-disables-attribution :

Thuộc tính nội dung được kiểm tra là thuộc tính boolean

http://www.w3.org/TR/html5/infr Hạ tầng.html # bootolean-atts :

Sự hiện diện của một thuộc tính boolean trên một phần tử đại diện cho giá trị thực và sự vắng mặt của thuộc tính đại diện cho giá trị sai.

Nếu thuộc tính có mặt, giá trị của nó phải là chuỗi rỗng hoặc giá trị phù hợp không nhạy cảm với trường hợp ASCII cho tên chính tắc của thuộc tính, không có khoảng trắng ở đầu hoặc cuối.

Kết luận :

Sau đây là hợp lệ, tương đương và đúng :

<input type="text" disabled />
<input type="text" disabled="" />
<input type="text" disabled="disabled" />
<input type="text" disabled="DiSaBlEd" />

Sau đây là không hợp lệ :

<input type="text" disabled="0" />
<input type="text" disabled="1" />
<input type="text" disabled="false" />
<input type="text" disabled="true" />

Sự vắng mặt của thuộc tính là cú pháp hợp lệ duy nhất cho false :

<input type="text" />

sự giới thiệu

Nếu bạn quan tâm đến việc viết XHTML hợp lệ, hãy sử dụng disabled="disabled", vì <input disabled>không hợp lệ và các lựa chọn thay thế khác ít đọc hơn. Khác, chỉ sử dụng <input disabled>vì nó ngắn hơn.


3
Lưu ý: Nếu bạn sử dụng AngularJS và cần liên kết trạng thái bị vô hiệu hóa với một biến, bạn có thể sử dụng ng-disabledthay thế. Tương tự với các thuộc tính khác như thế này, nhìn chung chúng có ng-*đối tác thông minh
jakub.g

5
disabled={true}hoạt động trong mã JSX của ReacJs nhưng tôi chắc chắn rằng nó sẽ được dịch mã sang một trong các định dạng HTML5 hợp lệ / được phép.
RBT

1

Tôi mới thử tất cả những thứ này và đối với IE11, điều duy nhất có vẻ hoạt động là bị vô hiệu hóa = "true". Các giá trị bị vô hiệu hóa hoặc không có giá trị nào không hoạt động. Như một vấn đề thực tế, jsp có một lỗi tương đương được yêu cầu cho tất cả các trường, vì vậy tôi phải chỉ định vô hiệu hóa = "true" để điều này hoạt động.


1
Câu hỏi của OP là về HTML (tức là các điều khiển phía máy khách). Bạn đang xem các điều khiển phía máy chủ; những người có quy ước khác nhau. Bạn sẽ nhận thấy sự khác biệt nếu bạn kiểm tra đầu ra HTML bằng tệp JSP của bạn. Nếu bạn vẫn còn nghi ngờ, hãy thử fiddle này trong IE11.
Ruud Helderman

Tôi đã thấy điều tương tự ở phía máy khách trên IE 11. IE 11 buộc một cái gì đó tồn tại, vì vậy chỉ cần thiết lập kết quả bị vô hiệu hóa bị vô hiệu hóa = ""
Robert Achmann

1

Trong HTML5, không có giá trị chính xác, tất cả các trình duyệt chính không thực sự quan tâm thuộc tính là gì, họ chỉ kiểm tra xem thuộc tính có tồn tại để phần tử bị vô hiệu hóa hay không.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.