Tôi có hai trang với các mẫu HTML. Trang đầu tiên có biểu mẫu gửi và trang thứ hai có biểu mẫu xác nhận. Biểu mẫu đầu tiên cung cấp nhiều lựa chọn điều khiển, trong khi trang thứ hai hiển thị lại dữ liệu từ biểu mẫu gửi với thông báo xác nhận. Trên mẫu thứ hai này, tất cả các trường phải tĩnh.

Từ những gì tôi có thể thấy, một số điều khiển biểu mẫu có thể readonlyvà tất cả đều có thể disabled, sự khác biệt là bạn vẫn có thể chuyển sang trường chỉ đọc.

Thay vì thực hiện trường này theo trường, có cách nào để đánh dấu toàn bộ biểu mẫu là chỉ đọc / tắt / tĩnh để người dùng không thể thay đổi bất kỳ điều khiển nào không?

Bọc các trường đầu vào và các thứ khác vào một <fieldset>và cung cấp cho nó disabled="disabled"thuộc tính.

Ví dụ ( http://jsfiddle.net/7qGHN/ ):

<form>
    <fieldset disabled="disabled">
        <input type="text" name="something" placeholder="enter some text" />
        <select>
            <option value="0" disabled="disabled" selected="selected">select somethihng</option>
            <option value="1">woot</option>
            <option value="2">is</option>
            <option value="3">this</option>
        </select>
    </fieldset>
</form>

Không phải tất cả các yếu tố hình thức có thể được đặt thành readonly, ví dụ:

• hộp kiểm
• hộp radio
• tải lên tập tin
• ...hơn..

Sau đó, giải pháp hợp lý sẽ là đặt các disabledthuộc tính của tất cả các thành phần của biểu mẫu true, vì OP không nói rõ rằng biểu mẫu "bị khóa" cụ thể phải được gửi đến máy chủ (mà disabledthuộc tính không cho phép).

Một giải pháp khác, được trình bày trong bản demo bên dưới, là đặt một lớp lên trên formphần tử, điều này sẽ ngăn mọi tương tác với tất cả các phần tử bên trong formphần tử, vì lớp đó được đặt với z-indexgiá trị lớn hơn :

BẢN GIỚI THIỆU:

var form = document.forms[0], // form element to be "readonly"
    btn1 = document.querySelectorAll('button')[0],
    btn2 = document.querySelectorAll('button')[1]

btn1.addEventListener('click', lockForm)
btn2.addEventListener('click', lockFormByCSS)

function lockForm(){
  btn1.classList.toggle('on');
  [].slice.call( form.elements ).forEach(function(item){
      item.disabled = !item.disabled;
  });
}

function lockFormByCSS(){
  btn2.classList.toggle('on');
  form.classList.toggle('lock');
}

form{ position:relative; } 
form.lock::before{
  content:'';
  position:absolute;
  z-index:999;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

button.on{ color:red; }

<button type='button'>Lock / Unlock Form</button>
<button type='button'>Lock / Unlock Form (with CSS)</button>
<br><br>
<form>
  <fieldset>
    <legend>Some Form</legend>
    <input placeholder='text input'>
    <br><br>
    <input type='file'>
    <br><br>
    <textarea placeholder='textarea'></textarea>
    <br><br>
    <label><input type='checkbox'>Checkbox</label>
    <br><br>
    <label><input type='radio' name='r'>option 1</label>
    <label><input type='radio' name='r' checked>option 2</label>
    <label><input type='radio' name='r'>option 3</label>
    <br><br>
    <select>
      <option>options 1</option>
      <option>options 2</option>
      <option selected>options 3</option>
    </select>
  </fieldset>
</form>

Bạn có thể sử dụng chức năng này để vô hiệu hóa biểu mẫu:

function disableForm(formID){
  $('#' + formID).children(':input').attr('disabled', 'disabled');
}

Xem bản demo làm việc tại đây

Lưu ý rằng nó sử dụng jQuery.

Trên trang xác nhận, không đặt nội dung trong các điều khiển có thể chỉnh sửa, chỉ cần viết chúng vào trang.

Không có cách tích hợp nào mà tôi biết để làm điều này vì vậy bạn sẽ cần đưa ra một giải pháp tùy chỉnh tùy thuộc vào mức độ phức tạp của biểu mẫu của bạn. Bạn nên đọc bài viết này:

Chuyển đổi các biểu mẫu HTML thành chỉ đọc ( Cập nhật : liên kết bài bị hỏng, liên kết lưu trữ )

EDIT: Dựa trên bản cập nhật của bạn, tại sao bạn lại lo lắng về việc nó chỉ đọc? Bạn có thể thực hiện thông qua phía máy khách nhưng nếu không, bạn sẽ phải thêm thẻ yêu cầu vào mỗi điều khiển hoặc chuyển đổi dữ liệu và hiển thị dưới dạng văn bản thô không có điều khiển. Nếu bạn đang cố gắng làm cho nó chỉ đọc để bài đăng tiếp theo sẽ không được sửa đổi thì bạn có vấn đề vì bất kỳ ai cũng có thể gây rối với bài đăng để tạo ra bất cứ điều gì họ muốn vì vậy thực tế cuối cùng bạn cũng nhận được dữ liệu. một lần nữa để đảm bảo nó là hợp lệ.

Không có cách HTML chính thức, tuân thủ đầy đủ để làm điều đó, nhưng một ít javascript có thể đi một chặng đường dài. Một vấn đề khác bạn sẽ gặp phải là các trường bị vô hiệu hóa không hiển thị trong dữ liệu POST

Đây là một giải pháp lý tưởng để vô hiệu hóa tất cả các yếu tố đầu vào , textareas , select và nút trong một phần tử được chỉ định.

Đối với jQuery 1.6 trở lên :

// To fully disable elements
$('#myForm :input').prop('disabled', true); 

Hoặc là

// To make elements readonly
$('#myForm :input').prop('readonly', true); 

jQuery 1.5 trở xuống :

$('#myForm :input').prop('disabled', 'disabled');

Và

$('#myForm :input').prop('readonly', 'readonly');

Một cách đơn giản khác được tất cả các trình duyệt hỗ trợ là:

HTML:

<form class="disabled">
  <input type="text" name="name" />
  <input type="radio" name="gender" value="male">
  <input type="radio" name="gender" value="female">
  <input type="checkbox" name="vegetarian">
</form>

CSS:

.disabled {
  pointer-events: none;
  opacity: .4;
}

Nhưng hãy lưu ý rằng việc lập bảng vẫn hoạt động với phương pháp này và các yếu tố tập trung vẫn có thể được người dùng thao tác.

Có tất cả id của biểu mẫu được đánh số và chạy một vòng lặp for trong JS.

 for(id = 0; id<NUM_ELEMENTS; id++)
   document.getElementById(id).disabled = false; 

Tôi muốn sử dụng jQuery:

$('#'+formID).find(':input').attr('disabled', 'disabled');

find () sẽ đi sâu hơn nhiều cho đến khi đứa trẻ lồng nhau thứ n hơn trẻ em (), chỉ tìm những đứa trẻ ngay lập tức.

Cách dễ nhất

$('#yourform *').prop('readonly', true);

Bạn thêm lớp vô hình html trên biểu mẫu. Ví dụ

<div class="coverContainer">
<form></form>
</div>

và phong cách:

.coverContainer{
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0,0,0,0);
    position: absolute;
}

Người dùng Ofcference có thể ẩn lớp này trong trình duyệt web.