2011-02-09 28 views
10

Tôi có một hộp kiểm được cập nhật từ các lựa chọn khác nhưng điều quan trọng là phải hiển thị trạng thái đã chọn cho người dùng. Tuy nhiên tôi cũng muốn nó chỉ được đọc trong chức năng và được biểu diễn như vậy trong màn hình.Vô hiệu hóa một hộp kiểm trực quan nhưng cho phép nó vẫn gửi giá trị của nó

  • Nó hoạt động tốt bởi vô hiệu hóa hộp kiểm (cung cấp cho các màu xám hộp để hỗ trợ người dùng trực quan) tuy nhiên điều này có nghĩa là khi nộp giá trị không được lưu.

  • Ngược lại, nếu tôi thiết lập các hộp kiểm để read-only nó vô hiệu hóa các hộp kiểm nhưng vẫn xuất hiện như một hộp kiểm bình thường .

Tôi muốn một chút, mỗi hộp kiểm sẽ gửi giá trị của nó nhưng trông giống như hộp kiểm bị tắt và vẫn hiển thị trạng thái kiểm tra ... có ai có ý tưởng nào không?

+0

Làm cách nào để bạn đặt chỉ đọc? Bởi vì thuộc tính 'readonly' không, hoặc ít nhất là không nên áp dụng cho các hộp kiểm (http://www.w3.org/TR/html4/interact/forms.html#edef-INPUT, http: // www .whatwg.org/specs/web-apps/current-work/multipage/number-state.html # checkbox-state). – mercator

+0

Tôi nghĩ giải pháp này cũng hữu ích ở đây: https://stackoverflow.com/questions/12769664/how-to-make-html-select-element-look-like-disabled-but-pass-values ​​ –

Trả lời

10

Sử dụng trường ẩn <input type="hidden" />. Cư trú ẩn với các giá trị giống như bạn mong đợi từ hộp kiểm. Bằng cách này, phần tử trực quan tách biệt với phần tử dữ liệu và bạn sẽ không có những mối quan tâm này.

-1

Chỉ cần làm cho nó chỉ đọc, cung cấp cho nó một lớp học đặc biệt, và sau đó trong CSS của bạn, bạn có thể làm cho nó trông như nó bị vô hiệu hóa.

+1

* READONLY không làm việc trên hộp kiểm * ~ http://stackoverflow.com/questions/155291/can-html-checkboxes-be-set-to-readonly –

1

Là một giải pháp thay thế đơn giản, bạn có thể thêm phần tử biểu mẫu ẩn chứa giá trị bạn muốn được lưu trữ không? Với phương pháp này, bạn sẽ có được chức năng vô hiệu hóa phần tử, nhưng vẫn có giá trị được gửi. Và, bạn không phải lo lắng về bất kỳ vấn đề tương thích trình duyệt tiềm năng nào.

Ngoài ra, trên trường chỉ đọc, tôi nghĩ bạn cần sử dụng CSS để tạo kiểu cho hộp kiểm làm trường bị tắt.

1

Bạn có thể đặt trường nhập ẩn khi bạn đặt giá trị hộp kiểm, sau đó hộp kiểm sẽ chỉ dành cho mục đích hiển thị và giá trị thực sẽ được gửi qua các trường nhập ẩn.

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