18

<input>同時にすべてグレー表示 (無効化) できるHTML テキストのグループが必要です。また、彼らがいる領域全体を何らかの形でグレー表示するか、少なくとも目に見えるように無効にしたいと考えています. デスクトップ アプリケーションでこのようなことが行われているのを見てきました。

それを行うための簡単でエレガントな方法に関するアイデアはありますか? それぞれを に手動で設定することを避けようとしています。また、フォームの全体が編集不可能であることを示す 's を囲む領域disabled="disabled"もあります。<input>

編集：申し訳ありませんが、さらにいくつか言及する必要があります...

  1. すべてがローカルです。私は PHP や ASP などを使用していません... HTML、JavaScript、および CSS だけです。jqueryもありません！
  2. JavaScriptで「エリア」を動的に有効/無効にしたい
  3. それはではなく、ただのの<form>集まりです<input>
4

7 に答える 7

26

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

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

于 2010-09-24T18:26:37.380 に答える
11 
for(i=0; i<document.FormName.elements.length; i++) {
    document.FormName.elements[i].disabled=true;
}
document.getElementById("surroundingarea").style.backgroundColor = "#CCCCCC";

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

于 2010-09-24T18:24:49.910 に答える
8

注意してください:disabled

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

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

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

フォームが

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

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

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

于 2017-01-10T09:19:33.300 に答える
2

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


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

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

于 2010-09-24T18:24:59.803 に答える
2

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

于 2010-09-24T18:25:47.350 に答える
0

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

for (x=0; x<document.YOURFORM.elements.length; x++) {
     document.YOURFORM.elements[x].disabled=true;
}
于 2010-09-24T18:24:44.610 に答える