禁用div内的所有表单元素

问题描述 投票:0回答:13

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

jquery forms html field
13个回答
290
投票

尝试使用

:input
选择器以及父选择器:

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

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

33
投票

对于 jquery 1.6+,请使用

.prop()
而不是
.attr()
,

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

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

11
投票

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

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

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

5
投票

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

只需在字段集中禁用该字段集内的所有字段即可禁用。

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

1
投票

我在不同的地方使用下面的函数。 只要使用右侧选择器,就可以在表格中的 div 或按钮元素中使用。只是“:按钮”不会为我重新启用。

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

1
投票

对我来说,接受的答案不起作用,因为我有一些 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
投票

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

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

CSS 类

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

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 Tag 中添加类名。 它将阻止编辑 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");

0
投票

如果

div
内的表单仅包含表单输入元素,那么这个简单的查询将禁用
form
标签内的每个元素:

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

但是,除了form中输入的元素之外,它也会

禁用
,因为它的效果只会在输入类型的元素上看到,因此主要适合每种类型的表单!

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

0
投票

全部禁用且从不显示:

$('#mpw').find('input, textarea, button, select, label, div').attr("disabled","true").css({"disabled": "true","display":"none","visibility": "hidden"});

全部启用并再次显示全部:

$('#mpw').find('input, textarea, button, select, label, div').attr("disabled","").prop('disabled',"").css({"display":"","visibility":"visible"});
© www.soinside.com 2019 - 2024. All rights reserved.