禁用 div 中的所有表单元素

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

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

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

$("#parent-selector :input").attr("disabled", true);
    $(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);
}
}

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

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

或者

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

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

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

下面将禁用所有的输入,但不能将其 btn 类,也添加类覆盖禁用 css。

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

CSS 课程

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

对我来说,接受的答案没有工作,因为我有一些 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);

使用 CSS 类可以防止编辑 Div 元素

CSS:

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

约翰逊:

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

或者在 HTML 标签中添加类名。 它将阻止编辑 Div 元素。

只能打字

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

简单地说,这行代码将禁用所有输入元素

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

如何实现这一点,只使用 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');

如果您在 div中的表单只包含表单输入元素,那么这个简单的查询将 关闭 form标记中的每个元素:

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

但是,它也将 关闭以外的输入元素在 form,因为它的效果将只看到输入类型的元素,因此主要适合于每种类型的形式!

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