Мне нужно проверить, отключен ли 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 включен. Что мне здесь не хватает?
Так много ответов, но никто не обращается к фактической проблеме: div element не разрешает атрибут типа 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-*. Здесь вы можете узнать больше о jQuery .data(), который используется в первом примере.
Demo:
Причина, по которой isDisabled возвращает false, потому что вы скорее всего установили следующее в своем HTML:
<div id = "myDiv1" disabled>...</div>
В действительности disabled означает disabled = "", поэтому, поскольку "disabled" != "", если вы продолжаете использовать t26 > , вы всегда получите false.
Что будет работать:
Чтобы сделать эту работу, как упоминалось в других ответах, вы можете использовать:
$('#myDiv1').attr('disabled') == "disabled" (@guradio answer),$('#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);
});<!--- 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>Используйте это:
$(document).ready(function () {
if($('#myDiv1').is(':disabled'))
$("#myDiv2").hide();
else
$("#myDiv2").show()
});
Надеюсь, это поможет вам:
$(document).ready(function () {
var isDisabled = $('#myDiv1').is(':disabled')
if(isDisabled)
$("#myDiv2").hide();
else
$("#myDiv2").show()
});
Сначала вам нужно установить отключенное свойство для вашего div
<div id="myDiv" disabled="disabled">This is Div</div>
Затем вам нужно использовать этот
$('#myDiv1').is('[disabled=disabled]')
$('#myDiv1').attr('disabled') == "disabled" ? $("#myDiv2").hide() : $("#myDiv2").show();<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>Используйте $("#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>Если вы посмотрите на ссылку на атрибут HTML MDN, вы заметите, что атрибут disabled должен использоваться только для следующих тегов
команда, набор полей, ввод, keygen, optgroup, опция, выбор, текстовое поле
Вы можете создать собственный HTML data-* атрибут (или даже удалить данные) и дать ему значения, которые означают, что элемент отключен или нет. Я бы рекомендовал различать имя немного, чтобы мы знали его настраиваемый атрибут.
Как использовать атрибуты данных
Например:
$('#myDiv1').attr('data-disabled') == "disabled"
Установите атрибут disabled для любого объекта HtmlControl. В вашем примере это выглядит как:
<div id="myDiv1" disabled="disabled"><div>
<div id="myDiv2" ><div>
и в javascript можно проверить как
('#myDiv2').attr('disabled') !== undefined
$(document).ready(function () {
if($('#myDiv1').attr('disabled') !== undefined)
$("#myDiv2").hide();
else
$("#myDiv2").show()
});<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>Почему вы не используете CSS?
HTML:
<div id="isMyDiv" disabled>This is Div</div>
CSS
#isMyDiv {
/* your awesome styles */
}
#isMyDiv[disabled] {
display: none
}