Question

我有一个带有动态部分的html页面，该页面根据所选的选项而变化。这是选项部分：

//in document ready
$('#myH1Id').text($.cookie('bincookie'));

当按下“ next”（非西班牙语扬声器为“ siguiente”）按钮时，此更改。这是按钮的代码：

<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>

此按钮的脚本在此处：

<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>

所有这些都很好。该页面显示第一个问题，然后用户选择一个问题并单击下一步，然后框架发生变化并显示相应的下一个问题，然后继续进行直到完成问题分支。

但是，我无法弄清楚如何对按钮进行编码，以使其在单击时没有选择任何选项时发出警告消息（棘手的部分是未选中的行为，我知道如何抛出异常）。欢迎任何帮助（包括文档或Wiki）。谢谢大家。

编辑-更新

所以我已经更新了按钮脚本

<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>

现在，当未选择任何选项时，我仍显示警告消息，但仍执行“ SendAjaxForm”函数-生成异常（由于ind字段“ idrespuesta”为空，因此未选择任何选项，因此在期望int时引用了null参数）。不知道为什么。无论如何，谢谢大家。

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行。这是为了防止即使未选中任何选项，按钮也无法正常工作。

现在，如果我们在未选中任何选项的情况下按下“下一步”按钮，则会显示警报并停留在页面上，直到先前选择了任何选项为止。感谢大家的支持，希望对您有所帮助。

快乐的编码。

没有选定项目时的下一步按钮行为

1 个答案:

说明