How to make only one checkbox is checkable

Question

As you the code below, my checkbox is like button. I want to make it only one is checkable. For now, Checkbox button change color when is clicked and all buttons are checkable at the same time.

PS. I want to make my checkbox button only is checkable with same effect now(when user click the button

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

Please help me to solve this simple question. Thank you

Possible duplicate of [HTML checkbox - allow to check only one checkbox](https://stackoverflow.com/questions/19877370/html-checkbox-allow-to-check-only-one-checkbox) — Heretic Monkey, Oct 24 '18 at 17:35

score 2 · Answer 1 · answered Oct 24 '18 at 17:23

So basically you want a radio button. You could use something like this:

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

More info on radio buttons

Maarti · Answer 2 · 2018-10-24T17:22:08.163

Don't you want to use a radio button instead?

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>

score -1 · Answer 3 · answered Oct 24 '18 at 17:31

You can handle using 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');
 });

score -1 · Answer 4 · answered Oct 24 '18 at 17:36

Here's one way of doing it, if you absolutely must use checkboxes and not radio buttons.

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

How to make only one checkbox is checkable

4 Answers4