HTML formları olan iki sayfam var. İlk sayfanın bir gönderim formu ve ikinci sayfanın bir kabul formu vardır. İlk form birçok kontrol seçeneği sunarken, ikinci sayfa gönderim formundaki verileri bir onay mesajıyla tekrar görüntüler. Bu ikinci formda tüm alanlar statik olmalıdır.

Görebildiğim kadarıyla, bazı form kontrolleri olabilir readonlyve hepsi olabilir disabled, aradaki fark, hala salt okunur bir alana sekme yapabilmenizdir.

Bu alanı alana göre yapmak yerine, kullanıcının herhangi bir denetimi değiştiremeyeceği şekilde tüm formu salt okunur / devre dışı / statik olarak işaretlemenin herhangi bir yolu var mı?

Giriş alanlarını ve diğer şeyleri bir içine sarın <fieldset>ve ona disabled="disabled"özniteliği verin .

Örnek ( 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>

Tüm form öğeleri şu şekilde ayarlanamaz readonly, örneğin:

• onay kutuları
• radyo kutuları
• dosya yükleme
• ...Daha..

O zaman makul çözüm , OP belirli "kilitli" formun sunucuya gönderilmesi gerektiğini belirtmediğinden ( özniteliğin izin vermediği) tüm form öğelerinin disabledözniteliklerini ayarlamak olacaktır .truedisabled

Aşağıdaki demoda sunulan başka bir çözüm, formöğenin üzerine, öğenin içindeki tüm öğelerle herhangi bir etkileşimi önleyecek bir katman yerleştirmektir form, çünkü bu katman daha büyük bir z-indexdeğerle ayarlanmıştır :

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>

Formu devre dışı bırakmak için bu işlevi kullanabilirsiniz:

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

Çalışma demosuna buradan bakın

JQuery kullandığını unutmayın.

Onay sayfasında içeriği düzenlenebilir kontrollere koymayın, sadece sayfaya yazın.

Bu, belirli bir öğedeki tüm girişleri , metin alanlarını , seçimleri ve düğmeleri devre dışı bırakmak için ideal bir çözümdür .

JQuery 1.6 ve üstü için :

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

Veya

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

jQuery 1.5 ve altı :

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

Ve

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

Bunu yapmak için bildiğim yerleşik bir yol yok, bu nedenle formunuzun ne kadar karmaşık olduğuna bağlı olarak özel bir çözüm bulmanız gerekecek. Bu yazıyı okumalısınız:

HTML formlarını salt okunur hale dönüştürün ( Güncelleme : bozuk gönderi bağlantısı, arşivlenmiş bağlantı )

DÜZENLEME: Güncellemenize dayanarak, salt okunur olması konusunda neden bu kadar endişelisiniz? Bunu istemci tarafı aracılığıyla yapabilirsiniz, ancak değilse, gerekli etiketi her bir kontrole eklemeniz veya verileri dönüştürmeniz ve kontroller olmadan ham metin olarak görüntülemeniz gerekir. Bir sonraki gönderinin değiştirilmemesi için salt okunur hale getirmeye çalışıyorsanız, o zaman bir sorununuz var çünkü herkes istediklerini üretmek için gönderi ile uğraşabilir, böylece nihayet veriyi aldığınızda, kontrol etseniz iyi olur tekrar geçerli olduğundan emin olmak için.

Bunu yapmanın tam uyumlu, resmi bir HTML yolu yoktur, ancak küçük bir javascript uzun bir yol kat edebilir. Karşılaşacağınız bir başka sorun da, devre dışı bırakılan alanların POST verilerinde görünmemesidir.

En kolay yol

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

Tüm tarayıcılar tarafından desteklenen başka bir basit yol şudur:

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;
}

Ancak, sekmenin hala bu yaklaşımla çalıştığını ve odaklanan öğelerin yine de kullanıcı tarafından değiştirilebileceğini unutmayın.

Tüm form kimliklerini numaralandırın ve JS'de bir for döngüsü çalıştırın.

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

JQuery kullanmayı tercih ederim:

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

find (), iç içe geçmiş çocuğa kadar yalnızca yakın çocukları arayan çocuklardan () çok daha derine iner.

Form üzerine html görünmez katmanı eklersiniz. Örneğin

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

ve stil:

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

Tabii ki kullanıcı bu katmanı web tarayıcısında gizleyebilir.