时间戳

首页 > 解决方案 > JS display div on click of disabled input

javascript - JS display div on click of disabled input

问题描述

I'm trying to show the .hideme message on click of submit only when it is disabled.

And the .hideme should be unique for each submit. I'm not sure if I should use data-attributes to associate them. 

$(document).ready(function() {
  $("#post-1").hide();
  $("#post-1").click(postNotification);
});

function postNotification() {
  $("#post-1")
    .show()
    .animate({
      height: "30px",
      opacity: 1
    }, 250)
    .delay(2000)
    .animate({
      height: "0px",
      opacity: 0
    }, 250);
}
.hideme {
  background: blue;
  height: 0px;
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first">
  <div class="hideme" id="post1">Message 1</div>
  <input type="text" name="name" autocomplete="off" required/>
  <input type="submit" data-submit="1" id="post1" disabled></input>
</div>
<div class="second">
  <div class="hideme" id="post2">Message 2</div>
  <input type="text" name="name" autocomplete="off" required/>
  <input type="submit" data-submit="2" id="post2"></input>
</div>

标签： javascriptjquery

解决方案

而不是使用（禁用），您可以使用 css 使元素似乎被禁用

.disabled
{
color:#C0C0C0;
}

然后将此类添加到输入而不是禁用

<input type="submit" data-submit="1" class="btn disabled" id="post1" ></input>

并在 jquery 中检测该元素已启用或禁用类并决定应该执行哪个操作

$(document).ready(function() {
$(".btn").click(
function(event){
if($(event.target).hasClass("disabled")){
event.target.parentElement.querySelector(".hideme").style.opacity="1";
event.target.parentElement.querySelector(".hideme").style.height="30";
}else{
alert("action");
}
});
});

推荐阅读