为什么DIV不跟随父元素'

Why DIV does not follow the parent's attributes

本文关键字:元素 DIV 不跟随 为什么      更新时间:2023-09-26

考虑下面的代码片段

<fieldset id="fieldset">
    <input id="first" />
    <div id="second" />
</fieldset>

$('#fieldset').attr('disabled', 'disabled')
console.log($('#first').is(':disabled'))
console.log($('#second').is(':disabled'))

,输出为

true
false

我注意到输入标签跟随父属性,我认为所有的标签都有小部件跟随,但其他如div,a,span或..没有。

为什么?

如果我想让div元素跟随父元素的属性我该怎么做?

说明:

如果窗体控件的disabled属性被设置,或者如果窗体控件是fieldset元素的后代,而该fieldset元素的disabled属性被设置,并且不是该fieldset元素的第一个legend元素子元素的后代(如果有的话),则窗体控件将被禁用。

div没有被禁用,因为它不是一个表单控件。它不能被禁用,因为这样就没有意义了。

因此,如果您出于某种原因想要检查某个元素所在的fieldset是否被禁用,您可以为此创建一个自定义函数:

$.fn.isInDisabled = function () {
    var x;
    if($(this).is('fieldset')) {
       // If this is a fieldset, use it.
       x = $(this);
    }
    else {
        // Otherwise use the closest ancestor that is.
        x = $(this).parents('fieldset');
        // Return true if we are not in a fieldset.
        if(!x.length) return true;
    }
    // Return wheater x is disabled or not.
    return x.is(':disabled');
}

或者,如果您不介意我们不在字段集中的情况,您可以使用:

$.fn.isInDisabled = function () {
    return ($(this).is('fieldset') ? $(this) : $(this).parents('fieldset')).is(':disabled');
}

如果不在字段集中,将返回false