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，false也会始终myDiv1返回。我在这里缺少什么？

Answer 1

答案很多，但没有解决实际问题：div element不允许类型为disabled的属性。仅允许div global attributes，而form elements允许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-* - 属性。在这里，您可以阅读有关第一个示例中使用的jQuery .data()的更多信息。

<强>演示：

Try before buy

Answer 2

isDisabled 向您返回 false 的原因是，因为您最有可能在HTML中设置以下内容：

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

实际上， disabled 表示 disabled = "" ，因此， "disabled" != "" ，如果您继续使用 $('#myDiv1').is('[disabled=disabled]') ，您将始终获得 false 。

什么可行：

为了使其成功，正如其他答案所述，您可以使用：

$('#myDiv1').attr('disabled') == "disabled" （@guradio answer），
$('#myDiv1').is('[disabled=""]') 或
的 $('#myDiv1')[0].getAttribute("disabled") != null 即可。

无法胜任的工作：

虽然 $('#myDiv1')[0].getAttribute("disabled") != null 无论属性设置在哪个元素上都会有效，但另一方面， $('#myDiv1')[0].disabled 仅适用于＆＃39;表单元素＆＃39;并将为所有其他人返回 undefined （请查看最后的说明）。
当您使用 $('#myDiv1').is(':disabled') 时也会出现同样的情况。

或者，如果您想保持代码不变，可以在HTML中设置 disabled = "disabled" ，问题就会解决。

工作示例（使用2。）：

＆＃13;

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

＆＃13;

<!--- 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>

＆＃13;

注意：但请注意， disabled 属性应与＆＃39;表单元素一起使用＆＃39;而不是其他任何事情，所以请务必查看@insertusernamehere的详细信息，以获取更多信息。指示性地， disabled 属性应与以下元素一起使用：

的 button ，

fieldset （IE不支持），

的 input ，

keygen （IE不支持），

optgroup （由IE8 +支持），

option （由IE8 +支持），

select 和

的 textarea 即可。

Answer 3

使用这个：

$(document).ready(function () {
    if($('#myDiv1').is(':disabled'))
       $("#myDiv2").hide();
    else
      $("#myDiv2").show()
});

Answer 4

我希望这会对你有所帮助：

$(document).ready(function () {
    var isDisabled = $('#myDiv1').is(':disabled')
    if(isDisabled)
       $("#myDiv2").hide();
    else
      $("#myDiv2").show()
});

Answer 5

首先，您需要为div设置disabled属性

<div id="myDiv" disabled="disabled">This is Div</div>

然后你需要使用这个

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

Answer 6

＆＃13;

$('#myDiv1').attr('disabled') == "disabled" ? $("#myDiv2").hide() : $("#myDiv2").show();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='myDiv1' disabled="true">1</div>
<div id='myDiv2'>2</div>

＆＃13;

试试这种方式。但我不认为div有禁用属性或属性

＆＃13;

$('#myDiv1[disabled=true]').length > 0 ? $("#myDiv2").hide() : $("#myDiv2").show();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='myDiv1' disabled="true">1</div>
<div id='myDiv2'>2</div>

＆＃13;

使用属性选择器

attribute selector

描述：选择具有指定属性的元素，其值完全等于某个值。

Answer 7

使用$("#div1").prop("disabled")检查div是否已禁用。以下是实现该功能的示例代码段。

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style>
        .container {
            width: 100px;
            height: 100px;
            background: grey;
            margin: 5px;
            float: left;
        }
        div {
            width: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div>
        <input type="checkbox" id="ChkBox" onclick="UpdaieDivStatus()" /> Toggle access
    </div>
    <div id="div1" class="container">Div 1</div>
    <div id="div2" class="container">Div 2</div>


    <script>
        function UpdaieDivStatus() {
            if ($("#ChkBox").prop('checked')) {
                $("#div1").prop("disabled", true);
            } else {
                $("#div1").prop("disabled", false);
            }
            if ($('#div1').prop('disabled')) {
                $("#div2").hide();
            } else {
                $("#div2").show();
            }
            console.log($("#div1").prop("disabled"));
        }
    </script>

</body>

</html>

Answer 8

如果您查看此MDN HTML attribute reference，您会注意到disabled属性只应用于以下代码：

按钮，命令，字段集，输入，keygen，optgroup，选项，选择， textarea的

您可以选择创建自己的HTML data-*属性（甚至删除数据）并为其指定值，表示要禁用的元素。我建议稍微区分名称，以便我们知道它的自定义创建属性。

How to use data attributes

例如：

$('#myDiv1').attr('data-disabled') == "disabled"

Answer 9

在任何HtmlControl对象上设置disabled属性。在您的示例中，它呈现为：

<div id="myDiv1" disabled="disabled"><div>
<div id="myDiv2" ><div>

在javascript中可以像

一样进行检查

('#myDiv2').attr('disabled') !== undefined

＆＃13;

$(document).ready(function () {
      if($('#myDiv1').attr('disabled') !== undefined)
        $("#myDiv2").hide();
    else
      $("#myDiv2").show()
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="myDiv1" disabled="disabled">Div1<div>
  <div id="myDiv2" >Div1<div>

＆＃13;

Answer 10

为什么不使用CSS？

HTML：

<div id="isMyDiv" disabled>This is Div</div>

的CSS：

#isMyDiv {
    /* your awesome styles */
}
#isMyDiv[disabled] {
    display: none
}

检查div是否被禁用jQuery

10 个答案: