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

Как вы видите в приведенном ниже коде, мой флажок похож на кнопку. Хочу сделать только один проверяемый. На данный момент кнопка флажка меняет цвет при нажатии, и все кнопки могут быть отмечены одновременно.

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>

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

Почему вы не можете использовать переключатель?

— 24.10.2018 19:11

Возможный дубликат Флажок HTML - разрешить установить только один чекбокс

— 24.10.2018 19:35

jquery html checkbox

24.10.2018 19:09

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

112

Ответы 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>

24.10.2018 19:16

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

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

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

24.10.2018 19:23

Вы можете справиться с помощью 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');
 });

24.10.2018 19:31

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

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

24.10.2018 19:36

Другие вопросы по теме

Проблемы с вертикальной укладкой div-боксов

Нажмите, чтобы перенаправить пользователя на основе геолокации

Как выполнять операции с выбранными строками в чекбоксе в таблице в HTML

Автоматический переход по гиперссылке

Отправить в несколько баз данных input type = "radio"

Flexbox не переносится при изменении размера браузера

Изменить размер почтового ящика формы в Django

Входное значение изменения проверки формы

Как отобразить ItemTemplate и альтернативный ItemTemplate бок о бок в Gridview?

Как сделать выпадающее меню

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

Ответы 4

Другие вопросы по теме

Похожие вопросы