web-dev-qa-db-ja.com

淡色表示のHTMLフォームを作成する方法は？

同時にすべてグレー表示（無効）にできるHTMLテキスト<input>のグループが欲しいのですが。また、彼らがいるエリア全体が、どういうわけか淡色表示されるか、少なくとも目に見えて無効にされることを望みます。このようなことがデスクトップアプリケーションで行われるのを見てきました。

それを行う簡単でエレガントな方法についてのアイデアはありますか？手動でそれぞれをdisabled="disabled"に設定しないようにしています。また、フォームの一部全体が編集不可であることを示す<input>を囲むareaがあります。

編集：申し訳ありませんが、私はもう少し言及する必要があります...

  1. すべてローカルです。 PHPまたはASPまたはそのようなもの... HTML、JavaScript、CSSを使用していません。jqueryも使用していません！
  2. JavaScriptで動的に「エリア」を有効/無効にしたい
  3. <form>ではなく、<input>の集まりです
htmlformsinputdisabled-input
16
Tony R

Disabled = "disabled"パラメータはこれを行うための標準的な方法であり、jQueryなどを使用して、フィールドセットに含まれるすべてのフォーム要素（関連するフォーム要素をグループ化する標準的な方法）を動的に無効にすることができます。

または、フィールドセットの上に部分的に透明なdivを配置することもできます。これにより、マウスクリックからのフォーム要素のブロックも提供されますが、フォーム要素へのタブ移動は防止されません。それでもフォーム要素自体を無効にする必要があります。

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

formNameという名前のフォームの要素をループし、各要素を無効にします。次に、周囲の要素の背景色を変更します

9
lando

注意してください：disabled

ユーザーがフォームを送信した場合、input要素は送信されません。

あなたが代わりにしたいことは：

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

フォームが

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

それはケーキをカットしますか？

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

5
canoodle

次のように、jQueryを使用して、その領域のすべてのフォーム要素を無効にすることができます。


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

私はそれをチェックしなかったので、これがうまくいくことを願っています:)

2
Ventus

「無効」プロパティを使用しない場合は、HTMLフォームの上に透明なDIVを配置することもできます（適切にスタイル設定されているため）フォームが無効になっているように見えます-ユーザーはフォームを表示できますが、情報をクリックして入力しないでください...次に、何らかのイベントに基づいて、JSでこのDIVを削除/非表示にして、フォームを「有効」にすることができます。

2
Laimoncijus

ここの人々はループで答えを持っています-必要はありません。 .children()を使用します。

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

jsfiddle

1
Thielicious

すべてのフォーム要素をステップ実行して無効にすることができます。未テストですが、次のようなことを試してください：

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