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

因此，基本上，您需要一个单选按钮。您可以使用以下内容：

<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

Answer 2

您不想使用单选按钮吗？

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>

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

如果绝对必须使用复选框而不是单选按钮，则这是一种方法。

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

如何只选中一个复选框

4 个答案: