检查div是否被禁用jQuery

Question

我需要检查是否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

Answer 1

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

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

<div id="a" disabled></div>
<input id="b" disabled>

反对这个JavaScript:

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

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

这将返回false和true.

什么是解决方案呢？

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

<div id="c" data-disabled="true"></div>

并使用此JavaScript检查它:

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

要么:

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

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

演示:

买前先试试

Answer 2

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

<div id = "myDiv1" disabled>...</div>

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

什么会有效:

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

1. $('#myDiv1').attr('disabled') == "disabled" (@guradio回答),
2. $('#myDiv1').is('[disabled=""]') 要么
3. $('#myDiv1')[0].getAttribute("disabled") != null.

什么行不通:

1. 虽然$('#myDiv1')[0].getAttribute("disabled") != null无论属性设置在哪个元素上$('#myDiv1')[0].disabled都可以工作,但另一方面,它只适用于"表单元素"并将返回undefined所有其他元素(请查看结尾处的注释).
2. 使用时也会出现同样的情况$('#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);
});

<!--- HTML --->
<script src = "//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "myDiv1" disabled>DIV 1</div>
<div id = "myDiv2">DIV 2</div>

注意:请注意,该disabled属性应与"表单元素"一起使用而不是其他任何内容,因此请务必查看@insertusernamehere的详细信息,以获取更多相关信息.指示性地,该disabled属性旨在与以下元素一起使用:

1. button,
2. fieldset (IE不支持),
3. input,
4. keygen (IE不支持),
5. optgroup (由IE8 +支持),
6. option (由IE8 +支持),
7. select 和
8. textarea.