div内のすべてのフォーム要素を無効にする


161

jquery / javascriptで親div名のみを伝えることにより、フォーム内のすべてのフィールド(textarea / textfield / option / input / checkbox / submitなど)を無効にする方法はありますか?


4
これを行うと、フォームの送信時にこれらの要素の値が「消える」ことに注意してくださいreadOnly。値を保持するために、無効にするのではなく、それらを有効にします。
シャドウウィザードは、あなたのための耳です


1
アイデアは、クリックすることを許可/禁止するコントロールの前にdivを表示/非表示にしたり、CSSでスタイルが無効なコントロールを表示したりできます。
Jaider 2013年

回答:


261

:input親セレクターとともにセレクターを使用してみてください。

$("#parent-selector :input").attr("disabled", true);

これを使用してdiv内のすべての入力を値0に設定できますか?
jackson5 2012年

2
私も<a>を無効にしたい...私の<a>にもonclickがあります
RAJ

7
引用のjQueryをので:入力がjQueryの拡張はなく、CSS仕様の一部であり、使用するクエリ:入力はネイティブDOM querySelectorAll()メソッドによって提供されるパフォーマンスの向上の利点を取ることができません。:inputを使用して要素を選択するときに最高のパフォーマンスを実現するには、最初に純粋なCSSセレクターを使用して要素を選択し、次に.filter( ":input")を使用します。
acme

2
@acme:100%同意しますが、この質問では、どのセレクターをフィルターに掛けるかについてのヒントはありません。私が与えられた唯一の情報は、ユーザーが親のdiv名前でそれを行うことができなければならないということでした、それだけです。より多くの情報が与えられれば、より効率的な解決策を考え出すことができたでしょう。
Andrew Whitaker

1
.attr()ではなく.prop()を使用(jquery 1.6より上)
Akshay Gundewar

154
$('#mydiv').find('input, textarea, button, select').attr('disabled','disabled');

4
( 'input、textarea、button')である必要があり、すべてのセレクターは1組の引用符で囲む必要があります。api.jquery.com/multiple-selector複数の引数を送信する方法でこれを行います。
IvanIvanić

2
これは、テキストエリアとボタンを無視して、入力のみを検索します。:inputセレクターが適していますが、明示的にリストしたい場合は、を使用する必要があります$('#mydiv').find('input, textarea, button')
Mark Hildreth、2011年

1
...または単に$( '#your-form')。children()。prop( 'disabled'、true);
walv 14年

@walvコード、すべてのフォーム要素がフォームの単一の子孫である場合にのみ機能します。Find()は、子孫のレベルに関係なく、リスト内のすべての要素を検索します。このコード行は、新しいjqueryバージョンでattrの代わりにpropを使用することを除いて正しいです。
Chris O

32

jqueryの1.6+の場合は、使用.prop()の代わりに.attr()

$("#parent-selector :input").prop("disabled", true);

または

$("#parent-selector :input").attr("disabled", "disabled");

2
あなたは正しいですが、特にチェックボックスとラジオボタンが原因で、一部の時間は小道具が機能し、一部の時間は機能しません
デーモン

私はこれが古いスレッドであることを理解していますが、typescriptを使用するといくつかのエラーが発生します
Simon Price

5
    $(document).ready(function () {
        $('#chkDisableEnableElements').change(function () {
            if ($('#chkDisableEnableElements').is(':checked')) {
                enableElements($('#divDifferentElements').children());
            }
            else {
                disableElements($('#divDifferentElements').children());
            }
        });
    });

    function disableElements(el) {
        for (var i = 0; i < el.length; i++) {
            el[i].disabled = true;

            disableElements(el[i].children);
        }
    }

    function enableElements(el) {
        for (var i = 0; i < el.length; i++) {
            el[i].disabled = false;

            enableElements(el[i].children);
        }
    }


2

「無効」のHTML属性のみを使用してこれを達成するのはどうですか

<form>
 <fieldset disabled>
  <div class="row">
   <input type="text" placeholder="">
   <textarea></textarea>
   <select></select>
  </div>
  <div class="pull-right">
    <button class="button-primary btn-sm" type="submit">Submit</button>
  </div>
 </fieldset>
</form>

フィールドセットに無効を設定するだけで、そのフィールドセット内のすべてのフィールドが無効になります。

$('fieldset').attr('disabled', 'disabled');

1

以下の機能をいろいろなところで使っています。右側のセレクターが使用されている限り、テーブルのdivまたはボタン要素で機能します。":button"だけでは再度有効になりません。

function ToggleMenuButtons(bActivate) {
    if (bActivate == true) {
        $("#SelectorId :input[type='button']").prop("disabled", true);
    } else {
        $("#SelectorId :input[type='button']").removeProp("disabled");
    }
}

1つのソリューションで2つ。
3ルール

0

以下はすべての入力を無効にしますが、btnクラスへの入力はできません。また、無効なCSSを上書きするクラスを追加しました。

$('#EditForm :input').not('.btn').attr("disabled", true).addClass('disabledClass');

CSSクラス

.disabledClass{
  background-color: rgb(235, 235, 228) !important;
}

0

私のために受け入れられた答えは機能しませんでした。無効にされたasp net隠しフィールドがいくつかあり、可視フィールドを無効にすることだけを選択したからです

//just to save the list so we can enable fields later
var list = [];
$('#parent-selector').find(':input:visible:not([readonly][disabled]),button').each(function () {
    list.push('#' + this.id);
});

$(list.join(',')).attr('readonly', true);

0

CSSクラスを使用してDiv要素を編集できないようにする

CSS:

.divoverlay
{
position:absolute;
width:100%;
height:100%;
background-color:transparent;
z-index:1;
top:0;
}

JS:

$('#divName').append('<div class=divoverlay></div>');

または、HTMLタグにクラス名を追加します。Div要素を編集できなくなります。


0

テキストタイプのみ

$(".form-edit-account :input[type=text]").attr("disabled", "disabled");

パスワードタイプのみ

$(".form-edit-account :input[type=password]").attr("disabled", "disabled");

メールタイプのみ

$(".form-edit-account :input[type=email]").attr("disabled", "disabled");
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.