Question

我在这里创建的表单上有一个小问题。首先，向用户呈现单选按钮。有3个单选按钮选项电子邮件，MobileNo和AlternativePhoneNo，但只会根据用户选择的单选按钮显示确认MobileNo和确认AlernativePhoneNo文本框。

我遇到的问题是，一旦用户点击MobileNo，然后出现确认MobileNo文本框，当您在确认MobileNo文本框中没有输入任何内容并提交表单时，它会执行正确的服务器端验证但是确认MobileNo文本框再次隐藏，当您再次单击单选按钮MoibleNo时，会出现确认文本框，验证它应该如何。

我认为我需要执行JQuery或JavaScript功能，以便在用户检查上述内容后始终保持隐藏文本框可见.. ???

不知道怎么做这是我的HTML。

<div id="ConfirmMobTelNo" class="confirmmobtelno col-md-6" style="display:none">
                <!--  <i class="fa fa-phone-square" aria-hidden="true"></i>-->
                @Html.LabelFor(model => model.ConfirmMobileTelephoneNo, "Confirm your mobile telephone no", new { @style = "", @class = "", id = "" })
                @Html.TextBoxFor(model => model.ConfirmMobileTelephoneNo, new { placeholder = "re-enter your mobile no here.", @style = "", @class = "form-control", id = "confirmmobtelno" })
                @Html.ValidationMessageFor(model => model.ConfirmMobileTelephoneNo)
            </div>

这是我的Javascript

<script>

    $('.communicationCB input[name=CCommmunication]').click(function () { //.communication class passed input name == model public communication
        if ($(this).val() == "TelephoneNo") { //if value TelephoneNo selected in model
            $('.confirmmobtelno').show(); //show this text box
        } else {
            $('.confirmmobtelno').hide(); //hide textbox
        }

        if ($(this).val() == "TelephoneNoAlternative") {  //if value == to TelephoneNoalternative
            $('.confirmalttelno').show(); //show confirm alt tel no text box
        } else {
            $('.confirmalttelno').hide(); //else hide it
        }
    });

Answer 1

如果我说得对，你想根据所选的收音机输入重新加载显示相关隐藏的页面，是吗？

如果是，您可以强制点击，以便在您的电台输入上显示隐藏的相关内容。试试这个：

$(function() {
    $('.communicationCB input[name=CCommmunication]:checked').click();
});

以上代码段调用所选（click）单选框上的:checked事件。它应该像用户单击它一样工作。

Answer 2

我不得不在我的代码上方添加一个页面加载，如下所示，这样第一次加载。

    var checkedVal = $('.communicationCB input[name=CCommmunication]:checked').val(); //Added a variable to check the value
    if (checkedVal == "TelephoneNo") { //if checked valuie
        $('.confirmmobtelno').show(); //show this text box
    } else {
        $('.confirmmobtelno').hide(); //hide textbox
    };

    if (checkedVal == "TelephoneNoAlternative") {  //if checked valuie == to TelephoneNoalternative
        $('.confirmalttelno').show(); //show confirm alt tel no text box
    } else {
        $('.confirmalttelno').hide(); //else hide it
    };

在服务器端验证后显示隐藏的文本框？

2 个答案: