Как проверить, проверяются ли динамически сгенерированные переключатели или нет с помощью Jquery?

Question

У нас есть вопросник с вопросами типа MCQ, который генерируется динамически с использованием лезвий в laravel. Я хочу проверить ответ на каждый вопрос с помощью переключателей. Я не хочу, чтобы форма была отправлена, если пользователь оставляет один из вопросов.

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

<form action="/result" method="POST" id="form1">
  @csrf

  @php
    $count=0
  @endphp

 @foreach ($questions[$sections->id] as $question)
  <div class="ans" align="center">
    <div class="opt">

      <div class="row1">
        <label class="label">{{ $question->question }}</label>
      </div>

    <div class="ans">

     @php
      $answer=$answers[$question->id]
     @endphp

     @foreach ($answer as $answer)
      <label class="btn btn-default no-margin-rule" >
       <input type="radio" name="{{$count+1}}" value="{{$answer->id}}" id="ans{{$answer->answer}}" />
       <span class="option{{$answer->answer+1}}"></span>
      </label>
     @endforeach

    </div>
   </div>
  </div>

@endforeach
</form>
<div style="overflow: auto;">
  <div style="height:50px;">
    <div id="submitText" class="alert alert-danger" style="display:none">
      <strong>Can't Submit!</strong> Please select all options first, then click on submit.
    </div>
   </div>
    <button id="sub"   class="btn-self-submit float-right">Submit</button>&nbsp;&nbsp;&nbsp;
</div>

$("#sub").click(function(){
   var check = true;
   $("input:radio").each(function(){
     var name= $(this).attr('name');

     if($("input:radio[name="+name+"]:checked").length){
       check = true;
     }

     else{
      check=false;
     }

   });

   if(check){
     $("#form1").submit();
   }

   else{
     swal("Oops!", "Please select at least one answer in each question.", "error")
    }
});

Answer 1

Пожалуйста, используйте при клике

$("#sub").click(function(){});
replace with 
$("p").on("click", function(){));

Answer 2

<script>
   const swal=function(h,m,t)
   {
     console.info(h,m,t);
     alert( m )
   }

   $( "#sub" ).click(function(e)
   {
     let checked=[];
     let unchecked=[];
     $( "input:radio" ).each(function()
     {
        let name= $(this).attr('name');
        if( $( "input:radio[ name="+name+" ]:checked").length == 1 )checked.push(name);

        else unchecked.push( name );

     });

     if( unchecked.length === 0 )
     {
      $("#form1").submit();
     } 
     else
     {
       swal("Oops!", "Please select at least one answer in each question.", "error")
     }
     });
</script>

Answer 3

Вот мой подход. Я выполню проверки, когда будет сделана попытка отправки, потому что форма может быть отправлена ​​щелчком или нажатием клавиши ввода. Остальное описано в комментариях.

$('#form1').submit(function() {
    var submit = true; // Submit form if all radio buttons are checked.
    var errors = {}; // Store potential errors if some of the inputs is not checked.
    var radio_groups = {}; // Store the inputs grouped by name.

    $("#form1 input[type=radio]").each(function() { // Group the inputs.
        radio_groups[this.name] = true;
    });

    for(group_name in radio_groups) { // Check if the inputs are checked
        if (!$(":radio[name='" + group_name + "']:checked").length) {
           errors[group_name] = group_name + " is not checked!"; // Set error messages.
           submit = false; // Prevent form submission if there's an empty radio input.
        }
    }

    $.each(errors, function(key, value){
        alert(value); // Alert all errors.
    });
    return submit;
});

Этот код должен работать для вас из коробки, если идентификатор формы - «form1». Да, и еще одна вещь - не очень хорошая идея использовать целые числа в качестве входных имен.

Answer 4

Это может сработать - я не проверял и не использую jQuery, но, надеюсь, это может помочь

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>jQuery: Radio buttons</title>
        <script src='//code.jquery.com/jquery-latest.js'></script>
    </head>
    <body>
        <form id='form1' method='post'>
            <?php
                /* 
                    to roughly emulate the contents of the original form simply for testing 
                    generate some html input elements with mickey mouse values
                */
                for( $i=1; $i <= 10; $i++ ){

                    echo '<div>Question: '.$i.'<br />';


                    for( $j=1; $j <= 5; $j++ ){ 
                        printf('
                            <label>%2$d
                                <input type="radio" name="radio_%1$d" value="%1$d" />
                            </label>', 
                            $i, 
                            $j
                        );
                    }
                    echo '</div>';
                }

            ?>
            <input type='button' id='sub' value='Submit' />
        </form>

        <script>

            /* to avoid errors, replicate `swal` function */
            const swal=function(h,m,t){
                console.info(h,m,t);
                alert( m )
            }



            $( "#sub" ).click(function(e){

                let checked=[];
                let unchecked=[];

                $( "input:radio" ).each(function(){
                    let name= $(this).attr('name');


                    if( $( "input:radio[ name="+name+" ]:checked " ).length == 1 )checked.push( name );
                    else unchecked.push( name );

                });

                if( unchecked.length === 0 ){
                    $("#form1").submit();
                } else{
                    swal("Oops!", "Please select at least one answer in each question.", "error")
                }
            });
        </script>
    </body>
</html>

Answer 5

Вы можете упростить, я предположил, что каждый вопрос имеет одну радиокнопку, поэтому вы можете сравнить :checked длину с radio длиной кнопки.

$("#submit").click(function(e) {
   let check = false;
   if($('input:radio:checked').length == $('input:radio').length) {
     check = true;
   }

   if(check) {
     //submit form
   }
   console.log(check)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<lable>
   Q 1 <input type="radio" name="q1">
</lable>
<lable>
    Q 2 <input type="radio" name="q2">
</lable>
<lable>
    Q 3 <input type="radio" name="q3">
</lable>
  
<button id="submit">submit</button>

Answer 6

Это можно упростить, если принять 3 ответа на каждый вопрос

$("#sub").click(function(e) {
  var rads = $("input:radio");
  var checked = $("input:radio:checked");
  if (rads.length / 3 !== checked.length) {
    e.preventDefault();
    alert("Please select at least one answer in each question.");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
  Q1 <input type="radio" name="q1" value="A"> <input type="radio" name="q1" value="B"> <input type="radio" name="q1" value="C"><br> Q2 <input type="radio" name="q2" value="A"> <input type="radio" name="q2" value="B"> <input type="radio" name="q2" value="C"><br>  Q3 <input type="radio" name="q3" value="A"> <input type="radio" name="q3" value="B"> <input type="radio" name="q3" value="C"><br>
  <button id="sub" type="submit">submit</button>
</form>

Answer 7

Элемент

A button внутри формы автоматически обрабатывается как type="submit" по умолчанию, что мгновенно вызывает отправку формы при нажатии. Чтобы предотвратить это и обработать отправку самостоятельно, установите кнопку на type="button":

$("#sub").click(function(ev) {
  var check = false;
  $("input:radio").each(function() {
    var name = $(this).attr('name');

    if ($("input:radio[name=" + name + "]:checked").length) {
      check = true;
    } else {
      check = false;
    }

  });

  if (check) {
    $("#form1").submit();
  } else {
    console.log("Please select at least one answer in each question.");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
  Q1 <input type="radio" name="q1" value="A"> <input type="radio" name="q1" value="B"> <input type="radio" name="q1" value="C"><br> Q2 <input type="radio" name="q2" value="A"> <input type="radio" name="q2" value="B"> <input type="radio" name="q2" value="C"><br>  Q3 <input type="radio" name="q3" value="A"> <input type="radio" name="q3" value="B"> <input type="radio" name="q3" value="C"><br>
  <button id="sub" type="button">submit</button>
</form>