web-dev-qa-db-ja.com

javascript / jqueryを使用してフォーム内のすべてを無効にするにはどうすればよいですか？

レイヤー内にポップアップするフォームがあり、そのフォーム内のすべてを、入力のタイプに関してのみ読み取るようにする必要があります。とにかくそうする？

javascriptjqueryreadonly
42
Luci

これは単純なJavaScriptでは非常に簡単で、読み取り専用のフォーム入力をサポートするすべてのブラウザー（過去10年間にリリースされたほとんどすべてのブラウザー）で効率的に動作します。

var form = document.getElementById("your_form_id");
var elements = form.elements;
for (var i = 0, len = elements.length; i < len; ++i) {
    elements[i].readOnly = true;
}
36
Tim Down

:input セレクター、これを行う：

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

:input すべてを選択<input>、<select>、<textarea>および<button>要素。また、属性はreadonlyです。サーバーに投稿されない要素にdisabledを使用する場合は、それに基づいて必要なプロパティを選択します。

39
Nick Craver

HTML5では、<fieldset disabled />属性を使用して含まれるすべての入力を無効にすることができます。

無効：

このブール属性が設定されている場合、その最初のオプション要素の子孫を除く、その子孫であるフォームコントロールは無効になります。つまり、編集できません。マウスクリックやフォーカス関連イベントなどのブラウジングイベントは受信しません。多くの場合、ブラウザにはこのようなコントロールが灰色で表示されます。

リファレンス： MDC：fieldset

32
piotr_cz

その純粋なJavascript：

var fields = document.getElementById("YOURDIVID").getElementsByTagName('*');
for(var i = 0; i < fields.length; i++)
{
    fields[i].disabled = true;
}
4
Shanu

JQueryを使用して、これを最も簡単に行うことができます。これは、すべての入力要素、選択要素、およびテキスト領域要素に対して実行されます（これらの型の数が複数ある場合でも）。

$("input, select, option, textarea", "#formid").prop('disabled',true);

または、これを行うこともできますが、これによりすべての要素が無効になります（適用できる要素のみ）。

$("*", "#formid").prop('disabled',true);

disabledプロパティは、次の要素に適用できます。

  • ボタン
  • フィールドセット
  • 入力
  • optgroup
  • オプション
  • 選択する
  • テキストエリア

しかし、あなたが何を使いたいかはあなた次第です

3
Umar Asghar
$("#formid input, #formid select").attr('disabled',true);

または読み取り専用にする：

$("#formid input, #formid select").attr('readonly',true);
1
Māris Kiseļovs

これは私を決して失敗させたことがなく、私は他の答えでこのアプローチを見ませんでした。

//disable inputs
$.each($("#yourForm").find("input, button, textarea, select"), function(index, value) {
                $(value).prop("disabled",true);
        });
0
Dan Hargis
// get the reference to your form 
// you may need to modify the following block of code, if you are not using ASP.NET forms  
var theForm = document.forms['aspnetForm'];
if (!theForm) {
 theForm = document.aspnetForm;
}

// this code disables all form elements  
var elements = theForm.elements;
for (var i = 0, len = elements.length; i < len; ++i) {
 elements[i].disabled = true;
}
0
SHS

古い質問ですが、cssの使用については誰も言及していません。

pointer-events: none;

フォーム全体がクリックの影響を受けなくなりますが、hoversも影響を受けません。

0
Wojciechu