Как отключить остальные доступные флажки, если некоторые из них выбраны

Question

Мне было интересно через Интернет, и я нашел этот тип флажков с изображениями.(https://codepen.io/kskhr/pen/pRwKjg) Мне нужно отключить остальные флажки, когда выбрано 3.

JS

// image gallery
// init the state from the input
$(".image-checkbox").each(function () {
  if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
    $(this).addClass('image-checkbox-checked');
  }
  else {
    $(this).removeClass('image-checkbox-checked');
  }
});

// sync the state to the input
$(".image-checkbox").on("click", function (e) {
  $(this).toggleClass('image-checkbox-checked');
  var $checkbox = $(this).find('input[type="checkbox"]');
  $checkbox.prop("checked",!$checkbox.prop("checked"))

  e.preventDefault();
});

Я думаю, что лучший способ может быть решен с помощью JavaScript, но яЯ немного запутался.

Спасибо!

Answer 1

Создайте счетчик, чтобы отслеживать, сколько флажков установлено:

//html
<input type="checkbox" class="checkbox">1
<input type="checkbox" class="checkbox">2
<input type="checkbox" class="checkbox">3                            

-

let numberOfCheckboxesChecked = 0;

$('.checkbox').on("change", (e) => {
  if (e.target.checked) {
     numberOfCheckboxesChecked +=1 ;
  } else {
      numberOfCheckboxesChecked -=1;
  }

  if (numberOfCheckboxesChecked > 3) {
    e.target.checked = false;
   // or some other code to disable the remaining inputs
  }
});

Answer 2

let count = 0;
$(".checkbox").on("click", function() {
  if ($(this).is(":checked")) {
    $(this).removeClass("undone").addClass("done")
    count++;
  } else {
   $(this).removeClass("done").addClass("undone")
    count--
  }
  if (count == "3") {
    $(".checkbox").each(function() {
      if ($(".checkbox").hasClass("undone")) {
        $(".undone").attr("disabled", "disabled")
      }
    });
  }
  else{
   $(".checkbox").attr("disabled", false)
   
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label>
  <input class="checkbox undone" type="checkbox" value="Option1">Option 1</label>
</div>
<div>
  <label>
  <input class="checkbox  undone" type="checkbox" value="Option2">Option 2</label>
</div>
<div>
  <label><input class="checkbox  undone" type="checkbox" value="Option3" >Option 3</label>
</div>
<div>
  <label>
  <input class="checkbox undone" type="checkbox" value="Option4">Option 4</label>
</div>
<div>
  <label>
  <input class="checkbox undone" type="checkbox" value="Option5">Option 5</label>
</div>
<div>
  <label>
  <input class="checkbox  undone" type="checkbox" value="Option6" >Option 6</label>
</div>

Answer 3

Просто некоторая простая логика, чтобы проверить, сколько в настоящее время класса, а также, если у элемента, который выбран в данный момент, есть класс, если нет, его следует отключить:

if ($('.image-checkbox-checked').length === 3 && !$(this).hasClass('image-checkbox-checked')) 
    return;

Если вы добавите это в onclickсобытие должно действовать соответствующим образом.

Вот раздвоенный код: https://codepen.io/anon/pen/Rvyqyq

Codepen не нравится, что по какой-то причине здесь есть фрагмент, если он не загружается:

// image gallery
// init the state from the input
$(".image-checkbox").each(function() {
  if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
    $(this).addClass('image-checkbox-checked');
  } else {
    $(this).removeClass('image-checkbox-checked');
  }
});

// sync the state to the input
$(".image-checkbox").on("click", function(e) {

  if ($('.image-checkbox-checked').length === 3 && !$(this).hasClass('image-checkbox-checked')) return;

  $(this).toggleClass('image-checkbox-checked');
  var $checkbox = $(this).find('input[type="checkbox"]');
  $checkbox.prop("checked", !$checkbox.prop("checked"))

  e.preventDefault();
});

.nopad {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/*image gallery*/

.image-checkbox {
  cursor: pointer;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 4px solid transparent;
  margin-bottom: 0;
  outline: 0;
}

.image-checkbox input[type="checkbox"] {
  display: none;
}

.image-checkbox-checked {
  border-color: #4783B0;
}

.image-checkbox .fa {
  position: absolute;
  color: #4A79A3;
  background-color: #fff;
  padding: 10px;
  top: 0;
  right: 0;
}

.image-checkbox-checked .fa {
  display: block !important;
}

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- 
Image Checkbox Bootstrap template for multiple image selection
https://www.prepbootstrap.com/bootstrap-template/image-checkbox
-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container">
  <h3>Bootstrap image checkbox(multiple)</h3>
  <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
    <label class="image-checkbox">
      <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
      <input type="checkbox" name="image[]" value="" />
      <i class="fa fa-check hidden"></i>
    </label>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
    <label class="image-checkbox">
      <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
      <input type="checkbox" name="image[]" value="" />
      <i class="fa fa-check hidden"></i>
    </label>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
    <label class="image-checkbox">
      <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
      <input type="checkbox" name="image[]" value="" />
      <i class="fa fa-check hidden"></i>
    </label>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
    <label class="image-checkbox">
      <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
      <input type="checkbox" name="image[]" value="" />
      <i class="fa fa-check hidden"></i>
    </label>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
    <label class="image-checkbox">
      <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
      <input type="checkbox" name="image[]" value="" />
      <i class="fa fa-check hidden"></i>
    </label>
  </div>

</div>