Поведение следующей кнопки, когда нет выбранных элементов

Question

У меня есть HTML-страница с динамическим разделом, который изменяется в зависимости от выбранных параметров. Вот часть опций:

<div class="form-group-lg">
                        @foreach (var respuesta in Model.ListRespuestas) {
                            <div class="col-md-8">
                                <label class="control-label" for="@respuesta.Id">
                                    @respuesta.Nombre
                                </label>
                                <input type="radio" name="SelectedItem" id="@respuesta.Id" value="@respuesta.Id" style="margin-right: 10px;" />
                            </div>
                        }
                    </div>

Это изменяется, когда нажимается кнопка «Далее» («siguiente» для не говорящих на испанском языке). Это код для кнопки:

<div class="col-md-6 text-right">
                    <span data-placement="top" data-toggle="tooltip" title="" data-original-title="Confirmación de acción">
                        <input type="submit" id="siguiente" class="btn btn-primary" value="Siguiente" />
                    </span>
                </div>

И эта кнопка написана здесь:

<script>
            $('#siguiente').click(function (e) {
                e.preventDefault();
                SendAjaxForm();
            });
            $('input:radio[name="SelectedItem"]').change(
                function () {
                    if (this.checked) {
                        $.post('@Url.Content("~/Home/Opciones/?idrespuesta=")' + this.id, function (data) {
                            $("#content-options").html(data);
                        });
                    }
                });
        </script>

Все это прекрасно работает. На странице отображается первый вопрос, затем пользователь выбирает один и нажимает следующий, затем рамка изменяется и отображает соответствующие вопросы, соответствующие следующим, и процесс продолжается до тех пор, пока не закончится ветвь вопроса.

Тем не менее, я не могу понять, как кодировать кнопку для выдачи предупреждающего сообщения при нажатии, и ни одна опция не выбрана (сложная часть - поведение без выбора, я знаю, как генерировать исключения). Любая помощь (в том числе документы или вики) приветствуются. Спасибо всем заранее.

РЕДАКТИРОВАТЬ - ОБНОВИТЬ

Итак, я обновил скрипт кнопки

<script>
            $('#siguiente').click(function (e) {
                if ($('input:radio[name="SelectedItem"]').is(':checked')){
                    e.preventDefault();
                    SendAjaxForm();

                    $('input:radio[name="SelectedItem"]').change(function () {
                        if (this.checked) {
                            $.post('@Url.Content("~/Home/Opciones/?idrespuesta=")' + this.id, function (data) {
                                $("#content-options").html(data);
                            });
                        }
                    });
                } else {
                    alert("No se ha seleccionado nada");
                }
            });

        </script>

А теперь я показываю предупреждающее сообщение, когда ни одна опция не выбрана, но функция «SendAjaxForm» по-прежнему выполняется - генерируется исключение (ссылка на нулевой параметр при ожидании int, поскольку поле «idrespuesta» равно нулю, ни одна опция не выбрана) , Не знаю почему. В любом случае спасибо всем.

Answer 1

Я наконец получил это. Предлагаемые изменения влияют только на скрипт:

<script>
$('#siguiente').click(function (e) {

    $('input:radio[name="SelectedItem"]').change(function () {
        if (this.checked) {
            $.post('@Url.Content("~/Home/Opciones/?idrespuesta=")' + this.id, function (data) {
                $("#content-options").html(data);
            });
        }
    });

    if ($('input:radio[name="SelectedItem"]').is(':checked')){
        e.preventDefault();
        SendAjaxForm();

    } else {
        e.preventDefault();
        alert("No se ha seleccionado nada");
        }
});</script>

Объяснение

С if... else, вставленным в функцию щелчка, мы проверяем, выбрана ли какая-либо опция:

if ($('input:radio[name="SelectedItem"]').is(':checked')){
        e.preventDefault();
        SendAjaxForm();

    } else {
        e.preventDefault();
        alert("No se ha seleccionado nada");
        }

Обратите внимание на строки e.preventDefault(); на обе if... else альтернативы. Это должно было препятствовать тому, чтобы кнопка все еще работала, даже если никакая опция не отмечена.

Теперь, если мы нажмем кнопку «Далее» без какой-либо опции, отметим предупреждение и останемся на странице до тех пор, пока какой-либо параметр не будет выбран ранее. Спасибо всем за поддержку, надеюсь, это поможет.

Удачного кодирования.