检查div是否被禁用jQuery

我需要检查是否myDiv1已禁用.如果是这样,我需要隐藏myDiv2,否则我需要展示myDiv2.

这是我到目前为止:

$(document).ready(function () {
    var isDisabled = $('#myDiv1').is('[disabled=disabled]')
    alert(isDisabled); //this always returns false
    if(isDisabled)
        $("#myDiv2").hide();
    else
        $("#myDiv2").show()
});

但即使启用也会isDisabled返回.我在这里错过了什么？falsemyDiv1

如此多的答案,但没有解决实际问题:div元素不允许类型的属性disabled.在一个div只有全局属性是允许的,而disabled被允许的表单元素.

您可以通过测试此HTML轻松验证它:

反对这个JavaScript:

var e = $('#a');
alert(e.is(':disabled'));

var e = $('#b');
alert(e.is(':disabled'));

这将返回false和true.

什么是解决方案呢？

如果要拥有实际命名的属性,请disabled使用以下data-*属性:

并使用此JavaScript检查它:

var e = $('#c');
alert(e.data('disabled'));

要么:

var e = $('#c');
alert('true' === e.attr('data-disabled'));

取决于您将如何处理附加的data-*属性.在这里,您可以阅读有关.data()第一个示例中使用的jQuery的更多信息.

演示:

买前先试试

isDisabled返回false给您的原因是,您最有可能在HTML中设置以下内容:

...

实际上,disabled意味着disabled = "",所以,因为"disabled" != "",如果你继续使用$('#myDiv1').is('[disabled=disabled]')你将永远得到false.

什么会有效:

为了使其工作,正如其他答案所提到的,您可以使用:

$('#myDiv1').attr('disabled') == "disabled" (@guradio回答),

$('#myDiv1').is('[disabled=""]') 要么

$('#myDiv1')[0].getAttribute("disabled") != null.

什么行不通:

虽然$('#myDiv1')[0].getAttribute("disabled") != null无论属性设置在哪个元素上$('#myDiv1')[0].disabled都可以工作,但另一方面,它只适用于"表单元素"并将返回undefined所有其他元素(请查看结尾处的注释).

使用时也会出现同样的情况$('#myDiv1').is(':disabled').

或者,如果您希望保持代码不变,则可以disabled = "disabled"在HTML中进行设置,问题将得到解决.

工作实例(使用2.):

/* --- JavaScript --- */
$(document).ready(function(isDisabled) {
  isDisabled = $('#myDiv1').is('[disabled=""]');
  if (isDisabled) $("#myDiv2").hide();
  else $("#myDiv2").show()
  
  /* Will return 'true', because disabled = "" according to the HTML. */
  alert(isDisabled);
});

DIV 1
DIV 2