jQuery, как мне указать, по крайней мере, один флажок в группе требуется

Question

Прежде всего позвольте мне поблагодарить всех вас за ваши удивительные усилия и помощь до сих пор.Теперь к вопросу.

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

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

Solve One Solve Two

Теперь я использую плагин проверки и плагин метаданных.Как я могу легко сказать, если установлен один флажок с классом required_group, остальные больше не требуются?Я также поставил все флажки class="required"

Как всегда, Спасибо заранее!

Редактировать: Мои извинения за неправильную формулировку вопроса.Я бы использовал радио-кнопки или селекторы, так как это довольно просто, но меня просят использовать флажки.Еще раз спасибо за ваше время и извините за сумбур.

Answer 1

Пожалуйста, не делай этого.Это ужасная практика с точки зрения юзабилити.Как только пользователи увидят флажки, они предполагают, что будет многократный выбор.Для одного выбора у нас есть радиобоксы.Дайте им всем одно и то же имя, и они будут эксклюзивными.

Пример:

I am a:<br/>
<input type="radio" id="age_old" name="age" value="old">
  <label for="age_old">Oldtimer</label><br/>
<input type="radio" id="age_mid" name="age" value="mid" checked>
  <label for="age_mid">Middle-aged</label><br/>
<input type="radio" id="age_young" name="age" value="young">
  <label for="age_young">Youth</label><br/>

Бонус: JavaScript не требуется - все в простом HTML.Если вам нужна возможность ничего не выбирать, просто добавьте еще один переключатель с пустым значением:

<input type="radio" id="age_no" name="age" value="">
  <label for="age_no">...not telling!</label><br/>

ОБНОВЛЕНИЕ: Было отмечено, что вопрос не в этомоколо.Если это так, и требуется другое прочтение («необходимо установить хотя бы один флажок»), игнорируйте это.

Answer 2

Я согласен с Амаданом, что чекбоксы - это не тот путьФлажки для множественного выбора.Если вы хотите сделать форму доступной, сделайте ее SELECT:

<label for="myselect">Choose type of house</label>

<select name="myselect" id="myselect" class="required">
  <option value="1">Option 1 Text</option>
  <option value="2">Option 2 Text</option>
  <option value="3">Option 3 Text</option>
  <option value="4">Option 4 Text</option>
  <option value="5">Option 5 Text</option>
</select>

. Это сделает вашу форму более доброй для людей, которые перемещаются по ней с помощью программы чтения с экрана. Радиокнопки вызывают некоторые проблемы для людей, которые переключаются через формы.

Answer 3

Попробуйте что-то вроде этого:

var $invalid = $(":checkbox.required").filter(function() {
    var n = this.name;
    return $(":checkbox[name='" + n "']:checked").length == 0;
});

Оттуда вы можете сделать несколько вещей.Чтобы остановить отправку формы, убедитесь, что длина больше нуля (если это так, есть несколько недопустимых).Чтобы выделить недействительные:

$invalid.parent().css({ color: '#f00' });

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