Làm cách nào để tô xám hộp kiểm html?

Question

Tôi muốn tạo hộp kiểm chỉ đọc. Như thế này:

<input type="checkbox" onclick="return false;"> 

Tôi muốn các hộp kiểm để trông giống như nó bị vô hiệu hóa hoặc chuyển sang màu xám.

Tôi làm cách nào để thực hiện việc này?

Answer 1

Bạn cần phải vô hiệu hóa các hộp kiểm thêm:

<input type="checkbox" onclick="return false;" disabled="disabled"> 

Để đăng giá trị, chỉ cần làm cho nó chỉ đọc thay vì:

<input type="checkbox" onclick="return false;" readonly="readonly"> 

Bạn có nhãn hộp kiểm phong cách và nguyên liệu đầu vào chỉ đọc với CSS, ví dụ: đầu vào [readonly = "readonly"] {} nhưng trình duyệt sẽ làm cho hộp kiểm xuất hiện màu xám khi được đặt thành chỉ đọc.

Cập nhật:

Bạn đang ở lòng thương xót của trình duyệt khi phong cách hộp kiểm & để tạo kiểu một cách nhất quán trên tất cả các trình duyệt, bạn phải dùng đến hình ảnh ví dụ: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Nếu bạn don' t muốn làm điều này (và nó có vẻ như một giải pháp dài), giải pháp đơn giản nhất là tắt hộp kiểm để nó xuất hiện chính xác và đăng giá trị như đầu vào bị ẩn, ví dụ:

<input type="checkbox" onclick="return false;" disabled="disabled"> 
<input type="hidden" name="checkboxval" value="111" /> 

Answer 2

chỉ cần thêm thuộc tính 'disabled' trên hộp như thế này

<input type="checkbox" disabled="disabled" /> 

Answer 3

<input type="checkbox" class="readonly"> 

Css

input.readonly { 
    opacity : .50; 
    filter : alpha(opacity=50); /* IE<9 */ 
    cursor : default; 
} 

js

$('input.readonly').on('click', function(evt) { 
    evt.preventDefault(); 
} 

Thêm một lớp readonly đến các yếu tố bạn muốn grayout : qua css bạn đặt opacity và thay đổi kiểu cursor. Sau đó, xóa javascript nội dòng và ngăn tác vụ mặc định cho input.readonly yếu tố về sự kiện nhấp chuột

Answer 4

Hộp chọn đơn giản, chỉ css để chuyển sang màu xám bị tắt.

input[type=checkbox][disabled] { 
    filter: invert(25%); 
}