HTMLフォームを含む2つのページがあります。最初のページには送信フォームがあり、2番目のページには確認フォームがあります。最初のフォームでは多くのコントロールを選択できますが、2番目のページには送信フォームのデータが確認メッセージとともに再度表示されます。この2番目のフォームでは、すべてのフィールドが静的でなければなりません。
私が見ることができるものから、一部のフォームコントロールはreadonlyすべてのdisabled場合があり得ますが、読み取り専用フィールドにタブで移動できるという違いがあります。
このフィールドごとに行うのではなく、ユーザーがコントロールを変更できないようにフォーム全体を読み取り専用/無効/静的としてマークする方法はありますか？
回答:
入力フィールドとその他のものをにラップし<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>readonlyたとえば、すべてのフォーム要素をに設定できるわけではありません。次に、OPが特定の「ロックされた」フォームをサーバーに送信する必要があることを属性が許可していないため、OPがすべてのフォーム要素のdisabled属性をに設定するのが妥当な解決策です。truedisabled
以下のデモに示されている別の解決策は、form要素の上にレイヤーを配置することです。これにより、要素内のすべての要素との相互作用が防止formされz-indexます。
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>この関数を使用して、フォームを無効にすることができます。
function disableForm(formID){
$('#' + formID).children(':input').attr('disabled', 'disabled');
}jQueryを使用していることに注意してください。
確認ページでは、コンテンツを編集可能なコントロールに配置せず、ページに書き込んでください。
これを行うための組み込みの方法はないので、フォームの複雑さに応じてカスタムソリューションを考え出す必要があります。あなたはこの投稿を読むべきです：
HTMLフォームを読み取り専用に変換（更新：壊れた投稿リンク、アーカイブされたリンク）
編集：更新に基づいて、なぜそれを読み取り専用にすることについてそれほど心配しているのですか？クライアント側で行うことができますが、そうでない場合は、各コントロールに必要なタグを追加するか、データを変換して、コントロールなしの未加工テキストとして表示する必要があります。次の投稿が変更されないように読み取り専用にしようとしている場合、誰もが投稿を操作して必要なものを作成できるため、実際に最終的にデータを受信するときにチェックすることをお勧めします。再びそれが有効であることを確認します。
完全に準拠した公式のHTMLを使用する方法はありませんが、小さなJavaScriptは長い道のりを行くことができます。遭遇するもう1つの問題は、無効化されたフィールドがPOSTデータに表示されないことです。
これは、指定された要素のすべての入力、テキストエリア、選択、ボタンを無効にするための理想的なソリューションです。
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');すべてのブラウザでサポートされている別の簡単な方法は次のとおりです。
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;
}ただし、タブは引き続きこのアプローチで機能し、フォーカスのある要素はユーザーが引き続き操作できることに注意してください。
私はむしろjQueryを使いたいです：
$('#'+formID).find(':input').attr('disabled', 'disabled');find（）はn番目のネストされた子まで、直接の子のみを検索するchildren（）よりも深くなります。
最も簡単な方法
$('#yourform *').prop('readonly', true);フォームにhtml非表示レイヤーを追加します。例えば
<div class="coverContainer">
<form></form>
</div>とスタイル：
.coverContainer{
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0,0,0,0);
position: absolute;
}もちろん、ユーザーはWebブラウザーでこのレイヤーを非表示にすることができます。