javascript - 如果某些其他按钮具有特定类别，则切换按钮

我正在尝试禁用/启用（切换）一个按钮，如果其他1个或多个其他按钮具有类.selected

我已经尝试过了，但是仅在选择了一个按钮后才有效

$('body').on("click", "button.item-select", function (e) {
    e.preventDefault();
    let maxItems = 2;
    let Items = $('button.item-select.selected').length;

    if(Items < maxItems) {
        $(this).toggleClass('select');
        $(this).toggleClass('selected');
    } else {
        $(this).addClass('select');
        $(this).removeClass('selected');
    }

    if($(this).hasClass('selected')) {
        $('.change-this').prop("disabled", false);
    } else {
        $('.change-this').prop("disabled", true);
    }
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-danger change-this" disabled>Disabled/enabled</button>

<button type="button" class="btn btn-primary item-select">First</button>
<button type="button" class="btn btn-primary item-select">Second</button>
<button type="button" class="btn btn-primary item-select">Third</button>

只有当其中一个按钮的类为.selected时，才可以启用该按钮，否则将其禁用吗？

jsfiddle：https://jsfiddle.net/f56mzkae/

最佳答案

因此，根据您对评论的解释：

单击一个按钮时，我在该按钮上切换.selected类，然后选择具有该类的所有按钮，如果长度为1或更大，则启用change-this按钮，否则禁用它。

看一看。

$('body').on("click", "button.item-select", function (e) {
    e.preventDefault();
    $(this).toggleClass('select');
    $(this).toggleClass('selected');

    let itemsSelected = $('.selected').length;

    if(itemsSelected >= 1) {
      $('.change-this').prop("disabled", false);
    }
    else{
      $('.change-this').prop("disabled", true);
    }
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.selected{
  border: 1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-danger change-this" disabled>Disabled/enabled</button>

<button type="button" class="btn btn-primary item-select">First</button>
<button type="button" class="btn btn-primary item-select">Second</button>
<button type="button" class="btn btn-primary item-select">Third</button>