禁用 div 内的所有表单元素

Posted 2023-02-22

【中文标题】禁用 div 内的所有表单元素

【英文标题】：disable all form elements inside div

【发布时间】：2011-07-14 12:21:25

【问题描述】：

有没有办法通过只告诉 jquery/javascript 中的父 div 名称来禁用表单中的所有字段（textarea/textfield/option/input/checkbox/submit 等）？

【问题讨论】：

请注意，这样做会导致这些元素的值在提交表单时“消失” - 为了保留值，请将它们设为readOnly，而不是禁用。

How to disable all div content 的可能重复项

一个想法可以在它允许/阻止被点击的控件前面隐藏/显示一个 div，以及使用 css 禁用样式的控件。

【参考方案1】：

尝试使用:input 选择器和父选择器：

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

【讨论】：

我可以使用它来将 div 内的所有输入设置为值 0 吗？

我也想禁用 ... 我的 也有 onclick

引用jQuery: 因为 :input 是 jQuery 扩展而不是 CSS 规范的一部分，所以使用 :input 的查询不能利用原生 DOM querySelectorAll() 提供的性能提升方法。为了在使用 :input 选择元素时获得最佳性能，首先使用纯 CSS 选择器选择元素，然后使用 .filter(":input")。

@acme：同意 100%，但这个问题没有给出任何关于我可以过滤的选择器的提示。我得到的唯一信息是用户必须能够使用 parent div name 来完成此操作，仅此而已。如果提供更多信息，我本可以提出更有效的解决方案。

使用 .prop() 而不是 .attr() (jquery 1.6 以上)

【参考方案2】：

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

【讨论】：

应该是 ('input, textarea, button') 所有选择器都应该用一组引号括起来。 api.jquery.com/multiple-selector 以您的方式发送多个参数。

这只会找到你的输入，忽略文本区域和按钮。 :input 选择器是要走的路，但如果你想明确列出它们，你需要使用$('#mydiv').find('input, textarea, button')。

...或者只是 $('#your-form').children().prop('disabled', true);

@walv 您的代码仅在所有表单元素都是表单的单个后代时有效。 Find() 查找列表中的所有元素，而不考虑后代级别。这行代码是正确的，除了在新的 jquery 版本中使用 prop 而不是 attr。

【参考方案3】：

对于 jquery 1.6+，使用 .prop() 而不是 .attr()，

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

或

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

【讨论】：

你是对的，但有些时候道具有效，有些时候无效，特别是由于复选框和单选按钮

我意识到这是一个旧线程，但是在使用 typescript 时会引发一些错误

【参考方案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);
        
    

【参考方案5】：

这行代码将禁用所有输入元素

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

【讨论】：

我认为的最佳答案。

【参考方案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>

只需在字段集中禁用，该字段集中的所有字段都会被禁用。

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

【讨论】：

你可以disabled表单

【参考方案7】：

我在不同的地方使用下面的函数。只要使用正确的选择器，就可以在表格中的 div 或按钮元素中使用。只是 ":button" 不会为我重新启用。

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

【讨论】：

二合一解决方案很棒。

【参考方案8】：

以下将禁用所有输入，但无法将其添加到 btn 类，并且还添加了类以覆盖禁用 css。

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

css类

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

【参考方案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);

【参考方案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 元素。

【参考方案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");

【参考方案12】：

如果div 中的表单只包含表单输入元素，那么这个简单的查询将禁用 form 标签中的每个元素：

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

但是，除了在form 中输入元素之外，它还会禁用，因为它的效果只会在输入类型元素上看到，因此主要适用于每种类型的表单！

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

【讨论】：

请修正你的第二句话。似乎说您的代码将禁用非输入元素，但随后它说它只会影响输入元素。请澄清你的意思。 （顺便说一句，巧妙的技巧 - 很好的答案）