グレイで覆われたHTMLフォームを作成する方法は？

StackOverflow https://stackoverflow.com/questions/3789844

質問

HTMLテキストのグループが欲しいです <input>すべてが同時にグレイアウト（無効）になる可能性があります。また、彼らがいるエリア全体が、どういうわけか灰色になったり、少なくとも目に見えて障害を持つようにしたいと思っています。このようなことがデスクトップアプリケーションで行われているのを見てきました。

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

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

  1. すべてがローカルです。私はPHPやASPなどを使用していません... HTML、JavaScript、CSSだけです。また、jqueryはありません！
  2. JavaScriptで「エリア」を動的に有効/無効にしたい
  3. それはありません <form>, 、ただの束です <input>'s
役に立ちましたか？

解決

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

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

他のヒント

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

フォームの要素をフォーム名を使用してフォームの要素にループし、各要素を無効にします。次に、周囲の要素の背景色を変更します

注意してください：あなたが無効になっている場合>

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

代わりにやりたいことは次のとおりです。

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

フォームが内側にある場合

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

それはケーキを切っていますか？

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

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


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

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

「Disabled」プロパティでプレイしたくないと言う場合は、HTMLフォームに透明なdivを配置することもできます。情報をクリック/入力しないでください...その後、いくつかのイベントに基づいて、JSでこのDIVを削除/非表示にして、フォームを「有効」にすることができます。

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

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

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

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

jsfiddle

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top