Как сделать, что бы выбирался только один checkbox?

309

14 января 2018, 04:07

Здравствуйте!

Есть пачка инпутов:

<form>
<input type="checkbox" name="field1" id="oneMostCheck">
<input type="checkbox" name="field2" id="oneMostCheck">
<input type="checkbox" name="field3" id="oneMostCheck">
<input type="checkbox" name="field4" id="oneMostCheck">
<input type="checkbox" name="field5" id="oneMostCheck">
<button id="saveForm" type="submit">Применить</button>
</form>

Как сделать, например на JQuery, что бы из них мог быть выделен только один и форма не отправлялась (выскакивал алерт), если ни одного выделенного. Т.е. чекнул первую галочку, чекнул вторую, у первой чек снялся.

radiobutton не могу использовать тут.

Спасибо.

Answer 1

Вариант на css

input[name=field]{ 
  display: none; 
} 
input[name=field] + label{ 
  display: inline-block; 
  vertical-align: top; 
  width: 20px; 
  height: 20px; 
  border: 1px solid #555; 
} 
input[name=field]:checked + label{ 
  background: green; 
} 
#saveForm{ 
  pointer-events: none; 
  background: #ccc; 
  color: #888; 
} 
input[name=field]:checked + label ~ #saveForm{ 
  pointer-events: auto; 
  background: green; 
  color: #fff; 
}

<form> 
  <input type="radio" name="field" id="mc1"> 
  <label for="mc1"></label> 
 
  <input type="radio" name="field" id="mc2"> 
  <label for="mc2"></label> 
 
  <input type="radio" name="field" id="mc3"> 
  <label for="mc3"></label> 
 
  <input type="radio" name="field" id="mc4"> 
  <label for="mc4"></label> 
 
  <input type="radio" name="field" id="mc5"> 
  <label for="mc5"></label> 
 
  <button id="saveForm" type="submit">Применить</button> 
 
</form>

Answer 2

Сбрасывать все чекбоксы кроме текущего нажатого, проверять перед отправкой формы по количеству. И уберите одинаковые id у элементов, это является ошибкой в HTML, поскольку допускаются только уникальные значения. А вообще для этого используются радиокнопки и вы городите велосипед.

$('form').eq(0).on("change", function(e){  
    $('input[name^=field]').each(function() 
    {  
      if(e.target != this) 
        this.checked = false;  
    }); 
}) 
 
$('form').eq(0).on('submit', function() { 
     return $('input[name^=field]:checked:enabled').length == 1; 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form> 
<input type="checkbox" name="field1"> 
<input type="checkbox" name="field2"> 
<input type="checkbox" name="field3"> 
<input type="checkbox" name="field4"> 
<input type="checkbox" name="field5"> 
 
<button id="saveForm" type="submit">Применить</button> 
 
</form>

Answer 3

Вообще советую использовать Radio для этого, но если вам надо Checkbox, можно использовать следующую конструкцию.

И да, одно замечание: у вас идет дублирование ID, этого категорически нельзя делать и я убрал его..

$('form#my_form > :checkbox').on('change', function() { 
  var checkbox = $(this); 
  var name = checkbox.prop('name'); 
  if (checkbox.is(':checked')) { 
    $(':checkbox[name="' + name + '"]').not($(this)).prop({ 
      'checked': false, 
      'required': false 
    }); 
  } 
});

#my_form { 
  width: 110px; 
  text-align: right; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form id="my_form"> 
  <label>Первый</label> 
  <input type="checkbox" name="field" required> 
  <br> 
  <label>Второй</label> 
  <input type="checkbox" name="field" required> 
  <br> 
  <label>Третий</label> 
  <input type="checkbox" name="field" required> 
  <br> 
  <label>Четвертый</label> 
  <input type="checkbox" name="field" required> 
  <br> 
  <label>Пятый</label> 
  <input type="checkbox" name="field" required> 
  <br> 
  <br> 
  <button id="saveForm" type="submit">Применить</button> 
 
</form>

Answer 4

используйте метод siblings() для поиска соседних чекбоксов, и снимайте флажки с prop('checked', false).

При отправке формы проверяйте число отмеченных флажков в submit и возвращайте false, чтобы прервать отправку.

$("input").change(function(){ 
   $(this).siblings("input").prop('checked', false); 
}); 
 
$("form").submit(function(){ 
    if($("input:checked").length > 1){ 
       alert('error!'); 
       return false; 
    }  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form> 
   <input type="checkbox" name="field1"> 
   <input type="checkbox" name="field2"> 
   <input type="checkbox" name="field3"> 
   <input type="checkbox" name="field4"> 
   <input type="checkbox" name="field5"> 
  
   <button id="saveForm" type="submit">Применить</button> 
</form>

Answer 5

Если Вам нужно выделить ровно один чекбокс, то это не чекбокс, а радиокнопка. Если Вам нужно, чтобы радиокнопка выглядела как чекбокс, то задайте ей нужный стиль.

Далее, не нужно бомбить пользователя сообщениями "Ты дурак, выбери что нибудь". Просто блокируйте кнопку отправки, пока не будут установлены валидные параметры

jQuery(document).ready(function($) { 
  $('#saveForm').prop({disabled: true}); 
  $('input[type="radio"]').change(function() { 
    $('#saveForm').prop({disabled: false}); 
  }); 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form> 
  <!-- Первую кнопку делаем выбранной и скрываем ее, иначе кнопки будут в состоянии "grayed" --> 
  <input type="radio" name="field" checked="checked" style="display: none;"> 
  <input type="radio" name="field" value="field1"> 
  <input type="radio" name="field" value="field2"> 
  <input type="radio" name="field" value="field3"> 
  <input type="radio" name="field" value="field4"> 
  <input type="radio" name="field" value="field5"> 
 
  <button id="saveForm" type="submit">Применить</button> 
 
</form>

Answer 6

$('#someform [type="checkbox"]').click(function(event) { 
  var $chck = $(this).find('[type="checkbox"]'); 
  $chck.removeAttr('checked').filter(event.target).prop('checked', 'true'); 
 $(this).parent().find('[type="submit"]').removeAttr('disabled'); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form id="someform"> 
  <input type="checkbox" name="field1" id="oneMostCheck"> 
  <input type="checkbox" name="field2" id="oneMostCheck2"> 
  <input type="checkbox" name="field3" id="oneMostCheck3"> 
  <input type="checkbox" name="field4" id="oneMostCheck4"> 
  <input type="checkbox" name="field5" id="oneMostCheck5"> 
  <button id="saveForm" type="submit" disabled>Применить</button> 
</form>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Установить курсор в поле ввода в модальном окне jQuery

При вызове модального окна не ставится курсор в поле ввода, помогите решитьКод страницы:

329

HTML

Поп-ап в соседстве с svg-картой не реагирует на действия мышки

Есть svg-карта, поверх которой всплывает поп-ап с информацией о провинциях (#provinceInfo)В этом поп-апе у меня не работает прокрутка текста, поскольку...

357

HTML