Панель переключателя вниз только отмечена галочкой.Javascript / JQuery - PullRequest
Новая
       7

Панель переключателя вниз только отмечена галочкой.Javascript / JQuery

0 голосов
/ 12 декабря 2018

Я хочу создать панель slideToggle, которая может скользить вниз и назад только после того, как флажок установлен.Если флажок не установлен, то slideToggle не должен работать и выдает предупреждение

Панель не может быть открыта!

Но я не могу объединить это. 

$("#header").click(function(){
  $("#panel").slideToggle("slow");
});
$("chckbox").click(function(){
  alert("The panel can not be opened!")
});
#header, #panel{
  padding: 5px;
  height: 20px;
  text-align: center;
  width: 100%;
  border:1px solid grey;
}
#panel{
  height: 80px;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<caption for="chckbox">(On/Off)</caption>
<input type="checkbox" id="chckbox">
<div id="header">Panel</div>
<div id="panel"></div>

1 Ответ

0 голосов
/ 12 декабря 2018

Вам необходимо проверить статус флажка, используя checked свойство при нажатии на #header

$("#header").click(function(){
  if ($("#chckbox")[0].checked)
    $("#panel").slideToggle("slow");
  else
    alert("The panel can not be opened!")
});


$("#header").click(function(){
  if ($("#chckbox")[0].checked)
    $("#panel").slideToggle("slow");
  else
    console.log("The panel can not be opened!")
});
#header, #panel{
  padding: 5px;
  height: 20px;
  text-align: center;
  width: 100%;
  border:1px solid grey;
}
#panel{
  height: 80px;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<caption for="chckbox">(On/Off)</caption>
<input type="checkbox" id="chckbox">
<div id="header">Panel</div>
<div id="panel"></div>
...