如果元素包含类，则禁用按钮

Question

如果我的.Info div包含<i>标记中的任何一个包含特定类，我想禁用我的按钮。我试图这样做，但没有任何对我有用。

这是我的代码：

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".Info").change(function() {
    var str = "";
    if ($("i.fa fa-times").length > 0) {
      $('#jsbutton').attr('disabled', 'disabled');
    } else {
      $('#jsbutton').removeAttr('disabled');
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="info">
  <i class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="info">
  <i class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="info">
  <i class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="info">
  <i class="fa fa-times" aria-hidden="true"></i>
</div>
<button class="btn btn-primary btn-block" type="submit" id="jsbutton">Add Purchase Order</button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

何时＆＃39; info＆＃39;改变？

如果有的话应该包含＆＃39; i＆＃39;然后，谁也不重要......

if( document.querySelectorAll('i').length ) jsbutton.disabled = true

或更简单

jsbutton.disabled = document.querySelectorAll('i').length

Answer 2

jquery有hasClass这样的东西

if ( $('.i').hasClass( "fa fa-times" ) ) {

Answer 3

试试这个脚本：

<script>
 $(document).ready(function() {
    if ($("div.info").find("i").hasClass("fa fa-times"))
    {
        $('#jsbutton').attr('disabled', 'disabled');  
    }
    else
    {

        $('#jsbutton').prop("disabled", false);
    }

});
</script>

希望，这可能对你有所帮助。

Answer 4

尝试

if ($(".info").find("i.fa").length >= 0) {
        $("#jsbutton").attr("disabled", true);
}

Answer 5

您需要确保info类是小写的。

$('.info').on('click', function(e) {

在选择器中fa-times次类之前需要一个点。

if ($('i.fa.fa-times').length > 0) // if ($('i').hasClass('fa-times'))

演示

$(function() {
  $('.info').on('click', function(e) {
    if ($('i').hasClass('fa-times')) {
      $('#jsbutton').attr('disabled', 'disabled');
    } else {
      $('#jsbutton').removeAttr('disabled');
    }
  });
});

.info:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="info">
  <i class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="info">
  <i class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="info">
  <i class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="info">
  <i class="fa fa-times" aria-hidden="true"></i>
</div>
<button class="btn btn-primary btn-block" type="submit" id="jsbutton">Add Purchase Order</button>