как сделать обязательный выбор радио кнопки без формы?

Question

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

$(".next").click(function () {
  const selectAnswer = $(this).closest('.block-test').find('input[type="radio"].option:checked').val();
  console.log(selectAnswer);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block-test">
                <h2>{{$question->question}}</h2>
                <div class="wrap-options">
                   <div class="options">
                      <h3>{!!$question->example!!}</h3>
                      <div class="wrap-option">
                          <input class="option" type="radio" name="option" value="a"><h3 class="option">{{$question->a}}</h3>
                      </div>
                      <div class="wrap-option">
                          <input class="option" type="radio" name="option" value="b"><h3 class="option">{{$question->b}}</h3>
                      </div>
                      <div class="wrap-option">
                          <input class="option" type="radio" name="option" value="c"><h3 class="option">{{$question->c}}</h3>
                      </div>
                      <div class="wrap-option">
                        @if($question->d)
                        <input class="option" type="radio" name="option" value="d"><h3 class="option">{{$question->d}}</h3>
                        @endif
                      </div>  
                   </div>
                </div>
                <button type="button" data-order="{{$question->order}}" class="btn btn-info next">Next</button>
            </div>

Answer 1

как сделать обязательный выбор радио кнопки без формы? - Без формы это сложновато и требует много js кода.

Самый простой и практичный вариант - это оберунуть все Ваши radio-input-ы в "form" и добавить хотя бы к одному input аттрибут "required".

Я преобразовал не много Ваш код, под то что описал выше и вот что вышло:

<div class="block-test">
    
    <h2>{{$question->question}}</h2>
    
    <form>
        <div class="wrap-options">
            <div class="options">
                <h3>{!!$question->example!!}</h3>
                <div class="wrap-option">
                    <input class="option" type="radio" name="option" value="a" required><h3 class="option">{{$question->a}}</h3>
                </div>
                <div class="wrap-option">
                    <input class="option" type="radio" name="option" value="b"><h3 class="option">{{$question->b}}</h3>
                </div>
                <div class="wrap-option">
                    <input class="option" type="radio" name="option" value="c"><h3 class="option">{{$question->c}}</h3>
                </div>
                <div class="wrap-option">
                    @if($question->d)
                    <input class="option" type="radio" name="option" value="d"><h3 class="option">{{$question->d}}</h3>
                    @endif
                </div>
            </div>
        </div>
        <button type="submit" data-order="{{$question->order}}" class="btn btn-info next">Next</button>
    </form>
    
</div>

Answer 2

Проверить наличие input.option с атрибутом checked

$('.option:checked')

$(".next").click(function () {
  let checked = $('.option:checked')
  console.log(checked.length ? `Выбран вариант "${checked.attr("value")}"` : 'Ответ не выбран');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block-test">
                <h2>{{$question->question}}</h2>
                <div class="wrap-options">
                   <div class="options">
                      <h3>{!!$question->example!!}</h3>
                      <div class="wrap-option">
                          <input class="option" type="radio" name="option" value="a"><h3 class="option">{{$question->a}}</h3>
                      </div>
                      <div class="wrap-option">
                          <input class="option" type="radio" name="option" value="b"><h3 class="option">{{$question->b}}</h3>
                      </div>
                      <div class="wrap-option">
                          <input class="option" type="radio" name="option" value="c"><h3 class="option">{{$question->c}}</h3>
                      </div>
                      <div class="wrap-option">
                        @if($question->d)
                        <input class="option" type="radio" name="option" value="d"><h3 class="option">{{$question->d}}</h3>
                        @endif
                      </div>  
                   </div>
                </div>
                <button type="button" data-order="{{$question->order}}" class="btn btn-info next">Next</button>
            </div>

БЛОГ НА HUSL

как сделать обязательный выбор радио кнопки без формы?

Ответы (2 шт):