Как сделать, чтобы флажок был только один

Question

Как вы код ниже, мой флажок, как кнопка.Я хочу сделать это только один проверяемый.Пока кнопка флажка меняет цвет при нажатии, и все кнопки можно проверять одновременно.

PS.Я хочу, чтобы моя кнопка-флажок теперь можно было проверять с тем же эффектом (когда пользователь нажимает кнопку

 $('label.btn').on('click','input', function(){
     e.stopPropagation();

     $(this).attr('checked', !$(this).attr('checked'));
     $(e.target).closest('label').toggleClass('btn-flat');
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="col-4">
         <label class="btn btn-primary btn-block">
          <input type="checkbox" name="Categories" value="1" /> check1 </label>
</div>

     <div class="col-4">
     <label class="btn btn-primary btn-block">
      <input type="checkbox" name="Categories" value="1" /> check1 </label>
</div>

  

Пожалуйста, помогите мне решить этот простой вопрос.Спасибо

Answer 1

Вот один из способов сделать это, если вам абсолютно необходимо использовать флажки, а не переключатели.

$('label.btn').on('click', 'input', function(e) {
  e.stopPropagation();
  
  //only consider manipulating other elements if this one was checked
  if (e.target.checked) {
    //find all the other checkboxes with the same name
    var $selectedDuplicates = $(':checkbox').filter('[name="'+ e.target.name +'"]').not(e.target);
    
    //uncheck the other checkboxes
    $selectedDuplicates.prop('checked', false);
    //remove their parent class
    $selectedDuplicates.closest('label').removeClass('btn-flat');
  }
  
  //toggle the parent class on this checkbox's label
  $(e.target).closest('label').toggleClass('btn-flat');
});

.btn-flat {
  background-color:rgb(200, 200, 200);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-4">
  <label class="btn btn-primary btn-block">
      <input type="checkbox" name="Categories" value="1" /> check1
  </label>`
</div>

<div class="col-4">
  <label class="btn btn-primary btn-block">
      <input type="checkbox" name="Categories" value="1" /> check1
  </label>
</div>

Answer 2

Так что в основном вы хотите кнопку радио.Вы можете использовать что-то вроде этого:

<div>
    <label >
    <input type="radio" name="Categories" value="1" /> check1 </label>
    <label >
    <input type="radio" name="Categories" value="2" /> check2 </label>`
</div>

Подробнее о переключателях

Answer 3

Вы можете справиться с помощью JavaScript

$('label.btn').on('click','input', function(e){
   e.stopPropagation();

   var elms = document.querySelectorAll("input");
   for(var i =0; i< elms.length ; i++){
      if(e.target !== elms[i]){
         elms[i].checked = false;
      }
   }

   $(e.target).closest('label').toggleClass('btn-flat');
 });

Answer 4

Разве вы не хотите использовать вместо этого переключатель?

input[type="radio"].square {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox; 
  -ms-appearance: checkbox; 
}

<form>
  <label><input type="radio" name="group1"/>check1</label>
  <label><input type="radio" name="group1"/>check2</label>
  <br/><br/>
  Checkbox style:<br/>
  <label><input class="square" type="radio" name="group2"/>check3</label>
  <label><input class="square" type="radio" name="group2"/>check4</label>
</form>