Question

如果2个或更多其他按钮的类别为“已选择”，我正在尝试禁用/启用按钮

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

$('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>

是否只有在其中一个按钮已选择类别时才启用按钮？否则将其禁用吗？

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

Answer 1

因此，根据您对评论的解释，我认为您想要的是我在下面所做的事情。（如果我误解了，请澄清您的问题）

单击按钮时，我在该按钮上切换.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>

Answer 2

在这里，您可以轻松完成所需的工作。

document.addEventListener('click', ({ target }) => {
  if(target.matches('.btn-primary')) { 
    target.classList.toggle('item-select');
  }
  
  document.querySelector('.btn-danger').disabled = Array.from(document.querySelectorAll('.btn-primary'))
                                                       .some(b => b.classList.contains('item-select'));
});

.item-select {
  color: red;
}

<link rel="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">


<button type="button" class="btn btn-danger change-this">Disabled/enabled</button>
<button type="button" class="btn btn-primary">First</button>
<button type="button" class="btn btn-primary">Second</button>
<button type="button" class="btn btn-primary">Third</button>

Answer 3

这是我对您的问题的理解方式。change-this按钮仅在所有三个item-select按钮具有类别selected时才启用。因此，我们会听取任何item-select按钮的点击，并在获得点击后立即添加类selected。同时，我们现在检查所有三个按钮是否都具有类selected。

document.addEventListener('click', event => {
    if (event.target.classList.contains('item-select')) {
        // then the click was on one of the .item-select buttons
        // toggle .selected class to it
        event.target.classList.toggle('selected');

        // and each time buttons are clicked
        // check if they all have class .selected
        let count = document.querySelectorAll('.item-select.selected').length;

        if (count === 3) {
            document.querySelector('.change-this').removeAttribute('disabled');
        } else {
            document.querySelector('.change-this').setAttribute('disabled', '');
        }

    }
});

P.S .：对不起，我不擅长jQuery，所以使用纯JS。

如果其他按钮选择了类别，则启用/禁用按钮

3 个答案: