web-dev-qa-db-ja.com

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

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

jqueryformshtmlfield
147
amirash

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

$("#parent-selector :input").attr("disabled", true);
250
Andrew Whitaker
$('#mydiv').find('input, textarea, button, select').attr('disabled','disabled');
147
Trevor

Jquery 1.6以降の場合は、 .prop() の代わりに .attr() を使用してください。

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

または

$("#parent-selector :input").attr("disabled", "disabled");
29
Optimus Prime
    $(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);
        }
    }
5
Syed Nasir Abbas

単にこのコード行はすべての入力要素を無効にします

$('#yourdiv *').prop('disabled', true);
1
Samir Rahimy

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

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

HTML属性 'disabled'のみを使用してこれを達成するのはどうですか。

<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>

フィールドセットにdisabledと入力するだけで、そのフィールドセット内のすべてのフィールドが無効になります。

$('fieldset').attr('disabled', 'disabled');
1
طلحة

以下は、すべての入力を無効にしますが、btnクラスに追加できず、disable cssを上書きするクラスも追加します。

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

cSSクラス

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

私のために私は同様に無効になったいくつかのASPネット隠しフィールドを持っていたので私は目に見えるフィールドを無効にすることだけを選んだので、受け入れられた答えはうまくいきませんでした

//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
irfandar

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

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 Elementsを編集できなくなります。

0
Laddu Vasanth

テキストタイプのみ

$(".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");
0
Manish