Question

我有一个简单的联系表单，我已禁用提交输入，直到所有输入至少有一些文本。

问题：这个问题是我有分配给此提交输入的课程，hover / active＆amp;定期;所以即使它被禁用它看起来并不是因为悬停状态仍然像普通班级一样好。

问题：我可以通过告诉它在禁用时添加一个类来为我的提交输入添加一个类吗？我怎么能这样做？我是JS / jQuery的新手。

我的代码如下：

＆＃13;

$(document).ready(function() {
  var $submit = $("input[type=submit]"),
    $inputs = $('input[type=text], input[type=email]');

  function checkEmpty() {
    return $inputs.filter(function() {
      return !$.trim(this.value);
    }).length === 0;
  }
  $inputs.on('blur', function() {
    $submit.prop("disabled", !checkEmpty());
  }).blur();
});

＆＃13;

input {
  width: 100%;
  outline: none;
  padding: 15px;
  margin-bottom: 5px;
  font-size: 1em;
  font-weight: 500;
}
.contact_btn {
  background-color: #FC354C;
  color: white;
  outline: none;
  border: none;
  font-size: 14px;
  font-weight: 700;
  padding: 15px 25px;
  border-radius: 3px;
  text-transform: uppercase;
  margin-top: 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 7px 42px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 7px 42px;
  box-shadow: rgba(0, 0, 0, 0.2) 0 7px 42px;
  transition: all 0.1s ease;
}
.contact_btn:hover {
  background-color: #fc4f63;
}
.contact_btn:active {
  background-color: #fb0421;
  -moz-transform: scale3d(0.94, 0.94, 0.94);
  -ms-transform: scale3d(0.94, 0.94, 0.94);
  -webkit-transform: scale3d(0.94, 0.94, 0.94);
  transform: scale3d(0.94, 0.94, 0.94);
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 3px 18px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 3px 18px;
  box-shadow: rgba(0, 0, 0, 0.2) 0 3px 18px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input class="name_in" type="text" name="name" pattern="[a-zA-Z ]+" placeholder="Name*" required>
  <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" placeholder="Email*" required>
  <input name="telephone" pattern="^[0-9\-\+\s\(\)]*$" placeholder="Phone">
  <input class="contact_btn" type="submit" value="Send Your Message">
</form>

＆＃13;

Answer 1

要在禁用悬停效果时将其删除，请将css代码更改为此.button:hover::enabled。它仅在启用按钮时适用。但IE＆lt; 9不支持

.contact_btn:hover:enabled{
   /* this will only show when the button is enabled, */
   /* and the user is hovering over it.. */
}

如果禁用input或div，则添加一个类

1 个答案: