Как добавить проверку для флажков в JQuery?

Question

У меня есть форма, подобная приведенной ниже, и я хочу добавить подтверждение для JQuery, я пытался использовать html обязательный атрибут, но он не работает, помогите мне в этом

Код

//question 1
<label class="container">
  <input class="chk check_answer1" type="checkbox" name="answers[]" value='1' required="required">
  <span class="checkmark"></span>
</label>
<label class="container">
  <input class="chk check_answer1" type="checkbox" name="answers[]" value='1' required="required">
  <span class="checkmark"></span>
</label><label class="container">
  <input class="chk check_answer1" type="checkbox" name="answers[]" value='1' required="required">
  <span class="checkmark"></span>
</label>

//question 2
<label class="container">
  <input class="chk check_answer2" type="checkbox" name="answers[]" value='2' required="required">
  <span class="checkmark"></span>
</label>
<label class="container">
  <input class="chk check_answer2" type="checkbox" name="answers[]" value='2' required="required">
  <span class="checkmark"></span>
</label><label class="container">
  <input class="chk check_answer2" type="checkbox" name="answers[]" value='2' required="required">
  <span class="checkmark"></span>
</label>

//question 3
<label class="container">
  <input class="chk check_answer3" type="checkbox" name="answers[]" value='3' required="required">
  <span class="checkmark"></span>
</label>
<label class="container">
  <input class="chk check_answer3" type="checkbox" name="answers[]" value='3' required="required">
  <span class="checkmark"></span>
</label><label class="container">
  <input class="chk check_answer3" type="checkbox" name="answers[]" value='3' required="required">
  <span class="checkmark"></span>
</label>

Это код, и на этой странице пользователь должен выбрать хотя бы одну опцию для каждого вопроса

Answer 1

Сначала вам нужно назвать сгруппированные входы, которые одинаковы в вашем HTML. Используйте .on(change function(), затем найдите вход (элемент), который вы используете, $(this) и получите его имя. Затем мы пишем условное выражение, чтобы проверить, проверена ли оно, и если это так, удалите другие экземпляры проверки из этой <input> группы имен.

РЕДАКТИРОВАТЬ: Функция на каждом входе для проверки onchange, а затем, если во всех экземплярах ваших входов есть один проверенный элемент, мы изменяем атрибут disabled на false, разблокируя кнопку отправки.

Вы можете добавить отображаемые сообщения, если хотите, и css к Jquery коду, добавив пустой <div id="msg"></div>, в котором вы хотите отобразить информацию, затем вызовите значение этого div, чтобы поместить туда текст, в зависимости от сообщения, которое вы sh передаете.

//--> Remove the code below if you do want the user to only select one option per 
//--> group and it is okay for them to select multiple options per group...

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

//--> This handles the locking of the submit button
function checkChecked(divId) {
  var oneOfEachChecked = false;
  $('#' + divId + ' input[type="checkbox"]').each(function() {
    if ($(".check_answer1").is(":checked") && $(".check_answer2").is(":checked") && $(".check_answer3").is(":checked")) {
      oneOfEachChecked = true;
      $('#submit').prop('disabled', false);
      $('#mash').show().text(' <--- Mash me now, I am unlocked!').css('background', 'lightgreen');
    }
  });
  if (oneOfEachChecked === false) {
    $('#submit').prop('disabled', true);
    $('#mash').show().text(' X Sorry no go! X').css('background', '#FA3300');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="myForm">
  <div class="divs" id="check_answer1">
    //question 1
    <label class="container"></label>
    <input class="chk check_answer1" onchange="checkChecked('check_answer1')" type="checkbox" name="check_answer1" value="1">
    <span class="checkmark"></span>

    <label class="container"></label>
    <input class="chk check_answer1" onchange="checkChecked('check_answer1')" type="checkbox" name="check_answer1" value="1">
    <span class="checkmark"></span>
    <label class="container"></label>
    <input class="chk check_answer1" onchange="checkChecked('check_answer1')" type="checkbox" name="check_answer1" value="1">
    <span class="checkmark"></span>
  </div>
  <div class="divs" id="check_answer2">
    //question 2
    <label class="container"></label>
    <input class="chk check_answer2" onchange="checkChecked('check_answer2')" type="checkbox" name="check_answer2" value="2">
    <span class="checkmark"></span>

    <label class="container"></label>
    <input class="chk check_answer2" onchange="checkChecked('check_answer2')" type="checkbox" name="check_answer2" value="2">
    <span class="checkmark"></span>
    <label class="container"></label>
    <input class="chk check_answer2" onchange="checkChecked('check_answer2')" type="checkbox" name="check_answer2" value="2">
    <span class="checkmark"></span>
  </div>
  <div class="divs" id="check_answer3">
    //question 3
    <label class="container"></label>
    <input class="chk check_answer3" onchange="checkChecked('check_answer3')" type="checkbox" name="check_answer3" value="3">
    <span class="checkmark"></span>

    <label class="container"></label>
    <input class="chk check_answer3" onchange="checkChecked('check_answer3')" type="checkbox" name="check_answer3" value="3">
    <span class="checkmark"></span>
    <label class="container"></label>
    <input class="chk check_answer3" onchange="checkChecked('check_answer3')" type="checkbox" name="check_answer3" value="3">
    <span class="checkmark"></span>

  </div>
  <input id="submit" type="submit" name="submit" value="submit" disabled><span id="mash"></span>
</form>