Làm cách nào để tạo biểu mẫu HTML xám?

Question

Tôi muốn có một nhóm văn bản HTML <input> có thể chuyển thành màu xám (tắt) cùng một lúc. Tôi cũng muốn toàn bộ khu vực họ đang ở trong bằng cách nào đó được màu xám hoặc ít nhất là vô hình bị vô hiệu hóa. Tôi đã nhìn thấy những thứ như thế này được thực hiện trong các ứng dụng máy tính để bàn.

Bất kỳ ý tưởng nào về cách dễ dàng/thanh lịch để thực hiện? Tôi đang cố gắng tránh đặt từng thiết bị theo cách thủ công thành disabled="disabled" và cũng có khu vực xung quanh <input> cho biết rằng toàn bộ phần của biểu mẫu không thể chỉnh sửa được.

EDIT: Xin lỗi, tôi nên đề cập đến nhiều hơn một vài điều ...

1. Mọi thứ đều địa phương. Tôi không sử dụng PHP hoặc ASP hoặc bất kỳ thứ gì như thế ... chỉ HTML, JavaScript và CSS. Ngoài ra không có jquery!
2. Tôi muốn để bật/tắt tùy chọn "khu vực" động với JavaScript
3. Nó không phải là một <form>, chỉ cần một loạt các <input> 's

Answer 1

Tham số bị vô hiệu hóa = "bị vô hiệu hóa" là cách tiêu chuẩn để thực hiện điều này và bạn có thể sử dụng thứ gì đó như jQuery để tắt động tất cả các phần tử biểu mẫu có trong một fieldset (Cách nào là tiêu chuẩn nhóm các phần tử biểu mẫu liên quan) một cách nhanh chóng.

Hoặc bạn có thể đặt một phần div trong suốt trên đầu trường. Điều này cũng sẽ cung cấp một số ngăn chặn của các yếu tố hình thức từ nhấp chuột, nhưng sẽ không bảo vệ chống lại tabbing cho họ. Bạn vẫn nên tự vô hiệu hóa các phần tử biểu mẫu.

Answer 2

Bạn có thể bước qua tất cả các yếu tố hình thức và vô hiệu hóa chúng. Chưa được kiểm tra, nhưng thử một cái gì đó như thế này:

for (x=0; x<document.YOURFORM.elements.length; x++) { 
    document.YOURFORM.elements[x].disabled=true; 
} 

Answer 3

for(i=0; i<document.FormName.elements.length; i++) { 
    document.FormName.elements[i].disabled=true; 
} 
document.getElementById("surroundingarea").style.backgroundColor = "#CCCCCC"; 

vòng qua các yếu tố của hình thức với tên FormName và vô hiệu hóa từng phần tử .. sau đó thay đổi màu nền của các yếu tố xung quanh

Answer 4

Bạn có thể chỉ cần sử dụng jQuery để vô hiệu hóa tất cả các dạng yếu tố trong khu vực đó, như:

    //assuming that area is a div element with id lets say disabled-area 
    $(document).ready(function(){ 
    $("#disabled-area input").attr("disabled", "disabled"); 
    }); 

tôi đã không kiểm tra nó, vì vậy tôi hy vọng điều này sẽ làm việc :)

Answer 5

Nếu bạn nói bạn không muốn chơi với thuộc tính "bị vô hiệu hóa" - thì bạn cũng có thể định vị một số DIV trong suốt trên biểu mẫu HTML, mà (theo kiểu đúng) có thể làm cho dạng trông bị vô hiệu hóa - người dùng sẽ có thể thấy hình thức, nhưng không bấm/nhập bất kỳ thông tin vào nó ... Sau đó, dựa trên một số sự kiện, bạn chỉ đơn giản là có thể loại bỏ/ẩn DIV này với JS và làm cho hình thức "kích hoạt".

Answer 6

xin vui lòng lưu ý: nếu bạn làm khuyết tật>

the-yếu tố đầu vào sẽ không được truyền nếu người dùng gửi biểu mẫu.

những gì bạn muốn làm thay thế là:

<input type="text" name="surname" value="Korpela" readonly> 

nếu hình thức của bạn là bên trong một Liệu

<div style="background-color; grey;"> 

rằng cắt bánh?

https://www.cs.tut.fi/~jkorpela/forms/readonly.html

Answer 7

Người dân ở đây có câu trả lời với các vòng - không cần. Sử dụng .children().

$('form').children().prop('disabled',true); 

jsfiddle