禁用div內的所有表單元素

Question

有沒有辦法通過只告訴 jquery/javascript 中的父 div 名稱來禁用表單中的所有字段（textarea/textfield/option/input/checkbox/submit 等）？

Answer 1

嘗試使用:input選擇器和父選擇器：

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

Answer 2

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

Answer 3

對於 jquery .prop() ，使用.prop()而不是.attr() ，

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

或者

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

Answer 4

    $(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);
        }
    }

Answer 5

只需這行代碼將禁用所有輸入元素

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

Answer 6

如何僅使用 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>

只需將 disabled 放在 fieldset 中，該 fieldset 內的所有字段都會被禁用。

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

Answer 7

我在不同的地方使用下面的函數。 只要使用正確的選擇器，就可以在表格中的 div 或按鈕元素中使用。 只是 ":button" 不會為我重新啟用。

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

Answer 8

以下將禁用所有輸入，但無法將其添加到 btn 類，並且還添加了類來覆蓋禁用 css。

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

css類

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

Answer 9

對我來說，接受的答案不起作用，因為我有一些 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);

Answer 10

使用 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 元素。

Answer 11

僅文本類型

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

Answer 12

如果div中的表單只包含表單輸入元素，那么這個簡單的查詢將禁用form標簽中的每個元素：

<div id="myForm">
    <form action="">
    ...
    </form>
</div>

但是，它也會禁用form輸入元素以外的其他元素，因為它的效果只會在輸入類型元素上看到，因此主要適用於每種類型的表單！

$('#myForm *').attr('disabled','disabled');