javascript - 如何根据我的 ASP.NET MVC 5 应用程序中选择的单选框动态显示文本框并使其成为必需的

Question

所以，我正在学习 Jquery 的基础知识。我有两个单选框和一个文本框，如果选择“第一个”单选框，则隐藏文本框，如果选择“第二个”单选框，我想显示一个文本框并同时将其设置为“必填字段”。我尝试了一些解决方案，但我认为我过于复杂了。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-10">
    <input class="js-radio" id="SelectedRoleType" name="SelectedRoleType" type="radio" value="JobSeeker"> Job Seeker
    <input class="js-radio" id="SelectedRoleType" name="SelectedRoleType" type="radio" value="Referrer"> Referrar
</div>      
<div class="col-md-10">
    <input class="form-control" id="Email" name="Email" type="text" value="">
</div>

我为实现我的解决方案所遵循的步骤。

1. 向文本框添加了一个类“MyTextBoxClass”——[不确定是否有必要]

2. 添加了“不显示”

3. 向单选框添加了一个类“MyRadioClass”——[不确定是否有必要]

   <div>
<input class="MyRadioClass" id="SelectedRoleType" name="SelectedRoleType" type="radio" value="JobSeeker"> Job Seeker
<input class="MyRadioClass" id="SelectedRoleType" name="SelectedRoleType" type="radio" value="Referrer"> Referrar
</div>

4. 在那个 MyRadioClass 上添加了一个“CHANGE”事件
5. 在更改时检查单选框的值，
6. 如果是第二个，则删除 Style 属性，以便删除 NONE 并添加“Required Attribute”
7. 如果它是第一个复选框，则添加显示为无

$('.MyRadioClass').on('change', function () {
    if($('input[name=SelectedRoleType]:checked').val() == "Referrer")
    {
        $('.MyTextBoxClass').removeAttr("style");
        $('.MyTextBoxClass #Email').attr('required','required');
    }
    else {
        $('.MyTextBoxClass').css('display', 'none');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-10 MyRadioClass">
    <input class="js-radio" id="SelectedRoleType" name="SelectedRoleType" type="radio" value="JobSeeker"> Job Seeker
    <input class="js-radio" id="SelectedRoleType" name="SelectedRoleType" type="radio" value="Referrer"> Referrar
</div>
        
<div class="col-md-10 MyTextBoxClass" style="display:none;">
    <input class="form-control" id="Email" name="Email" type="text" value="">
</div>

问题 1。当我提交表单时，“必需”属性没有被附加。我可以在不在文本框中输入任何值的情况下提交表单。

问题 2。有没有更圆滑的方式来实现我想要实现的目标？

我的实际代码:

<h2>@ViewBag.Title.</h2>

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    <div class="form-group MyRadioClass">
        <div class="col-md-10">
            @Html.RadioButtonFor(m => m.SelectedRoleType, "JobSeeker", new { @class="js-radio"}) Job Seeker
            @Html.RadioButtonFor(m => m.SelectedRoleType,"Referrer", new { @class="js-radio"}) Referrar
        </div>
    </div>
    <div class="form-group MyTextBoxClass" style = "display:none" ">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type = "submit" class="btn btn-default" value="Register" />
        </div>
    </div>

}
<button class="btn btn-info">
    <i class="fa fa-lg fa-fw fa-facebook"></i>
    facebook
</button>


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script>
    $('.MyRadioClass').on('change', function () {
        if($('input[name=SelectedRoleType]:checked').val() == "Referrer")
        {
            $('.MyTextBoxClass').show();
            $('.MyTextBoxClass input').attr('required', true);

        }
        else {
            $('.MyTextBoxClass').hide();
        }
    });

</script>

Answer 1

你做错了。您应该清楚地了解 jQuery 选择器。

$('.MyTextBoxClass').css('required'); 将不起作用，因为您选择的是 HTML 元素，而不是输入字段。

其次，.css() 不是您要查找的内容。做这样的事情让它工作:

$(".MyTextBoxClass input").attr("required", true);

而且，要显示和隐藏文本输入，我建议使用 jQuery 的 show() 和 hide() 方法。

所以你的代码应该是这样的:

$('.MyRadioClass').on('change', function () {
    if($('input[name=SelectedRoleType]:checked').val() == "Referrer")
    {
        $('.MyTextBoxClass').show();
        $('.MyTextBoxClass input').attr('required', true);
    }
    else {
        $('.MyTextBoxClass').hide();
        $('.MyTextBoxClass input').removeAttr('required');
    }
});

如果还是不行，请告诉我。

编辑:从 form 标签中删除验证标签并使用 jQuery 的提交事件来解决问题。这是您可能想要阅读的链接 Stop form refreshing page on submit

例如，

$(document).ready(function(){
    $('yourForm').removeAttr("novalidate");
});

$('yourForm').on('submit', function(event){
    event.preventDefault();
    //DO STUFF
});