web-dev-qa-db-ja.com

jQueryのフィールドセット内のすべての要素を無効にするにはどうすればよいですか？

私は2つ持っています <fieldset>sは私のページにありますが、ユーザーの選択に応じて、そのうちの1つですべての要素を無効にする必要があります。

フィールドセットには、テキスト入力、選択、およびリンクが含まれています。それらを1つずつ無効にするのではなく、すべてを無効にする方法はありますか？

jqueryfieldset
17
AndreMiranda

子セレクターの使用はどうですか？

$("#myfieldeset").children().attr("disabled", "disabled");

子の選択をフィルタリングすることもできます。

$("#myfieldeset").children("a,input");
25
kgiannakakis

disabledのfieldset属性を設定できます。

From [〜＃〜] mdn [〜＃〜] ：

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

[〜＃〜] html [〜＃〜]：_<fieldset disabled> ... </fieldset>_

JQuery：$('#myfieldset').prop('disabled', true);

[〜＃〜] js [〜＃〜]：document.getElementById('#myFieldset').disabled = true;

IEノート：

これはいくつかのバグのためにInternet Explorerでは正しく機能しませんが、他のほとんどすべての場所（Edgeを含む）でうまく機能します）。

つまり、テキストとファイルの入力は適切に無効にならず、ユーザーは引き続きそれらを操作できます。

これが取引ブレーカーである場合は、ここにある他の回答で説明されているように、に移動して_<fieldset>_の子孫フォームコントロールにdisabled属性を配置する必要があります。

ブラウザサポート情報： http://caniuse.com/#feat=fieldset-disabled

8
Zach Lysobey

使ってみませんか：

$("#myfieldeset").attr("disabled", "disabled");

それは私のために働いた。それはすべての子の入力をうまく無効にしました。

EDIT：無効な属性はHTML5のフィールドセット要素にのみ適用できることに注意してください（merrypranksterのコメントを参照）。不思議なことに、ChromeやInternetExplorer（IE7とIE8でテスト済み）など、FirefoxやOpera以外のブラウザでも動作します。

3
franzlorenzon

入力要素を無効にするフィールドセットにclass = "disableMe"を設定すると、次のコードで必要な処理を実行できます。

$('fieldset.disableMe :input').attr('disabled', true)
3
pjesi

他の人が投稿したものに加えて：

.prop()の代わりに.attr()を使用します。

$('#myfieldset').prop('disabled',true)

DOMに関してはより正確です。

そして、それは検証ではうまく機能しないようです。 Firefoxとchromeの両方で、無効なフィールドセットに「必須」の入力が入力されていないフォームを送信できませんが、フォームの入力方法についても説明していません。

2
user729356213908560

何らかの理由でフィールドセットにIDを追加できない場合（通常はこれが推奨されます）、いつでもこれを実行して、すべての子要素を非表示にすることができます。

$('fieldset:first > *').attr('disabled','disabled');
0
KyleFarris