Ответ 1

Оберните содержимое всей формы тегом <fieldset> и установите атрибут disabled.

<form>
    <fieldset disabled>
        <input/>
        <input/>
        <input/>
    </fieldset>
</form>

Ответ 2

Оберните поля ввода и другие материалы в <fieldset> и приведите атрибут disabled="disabled".

Пример (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>

Ответ 3

Не все элементы формы могут быть установлены только для readonly, например:

• флажки
• радио коробки
• файл загружен
• ...Больше..

Тогда разумным решением было бы установить для всех disabled атрибутов всех элементов формы значение true, поскольку в OP не указывалось, что конкретная "заблокированная" форма должна быть отправлена на сервер (что disabled атрибут не разрешает).

Другое решение, которое представлено в демонстрации ниже, состоит в том, чтобы поместить слой поверх элемента form что предотвратит любое взаимодействие со всеми элементами внутри элемента form, поскольку для этого уровня установлено большее значение z-index:

DEMO:

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>

Ответ 4

Вы можете использовать эту функцию для отключения формы:

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

См. рабочую демонстрацию здесь

Обратите внимание, что он использует jQuery.

Ответ 5

На странице подтверждения не помещайте содержимое в редактируемые элементы управления, просто напишите их на странице.

Ответ 6

Я не знаю встроенного способа сделать это, поэтому вам нужно будет придумать индивидуальное решение в зависимости от сложности вашей формы. Вы должны прочитать этот пост:

Конвертировать HTML-формы только для чтения (Обновление: неработающая ссылка на публикацию, архивная ссылка)

РЕДАКТИРОВАТЬ: Основываясь на вашем обновлении, почему вы так беспокоитесь о том, чтобы оно только для чтения? Вы можете сделать это через клиентскую часть, но если это не так, вам придется добавить требуемый тег в каждый элемент управления или преобразовать данные и отобразить их в виде необработанного текста без элементов управления. Если вы пытаетесь сделать его доступным только для чтения, чтобы следующий пост не был изменен, у вас возникла проблема, потому что любой может связываться с постом, чтобы произвести все, что он хочет, поэтому, когда вы на самом деле наконец-то получите данные, вам лучше их проверить. еще раз, чтобы убедиться, что это действительно.

Ответ 7

Нет полностью совместимого, официального HTML-способа сделать это, но немного javascript может пройти долгий путь. Другая проблема, с которой вы столкнетесь, - это то, что отключенные поля не отображаются в данных POST.

Ответ 8

Имейте все пронумерованные формы и запустите цикл for в JS.

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

Ответ 9

Я бы предпочел использовать jQuery:

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

find() будет намного глубже до n-го вложенного дочернего элемента, чем children(), который ищет только для детей.

Ответ 10

Самый простой способ

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

Ответ 11

Это идеальное решение для отключения всех входов, текстовых полей, селекторов и кнопок в указанном элементе.

Для jQuery 1.6 и выше:

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

Или же

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

JQuery 1.5 и ниже:

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

А также

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

Ответ 12

Вы добавляете html невидимый слой поверх формы. Например

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

и стиль:

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

Конечно, пользователь может скрыть этот слой в веб-браузере.