mvc DropDownListFor选择后更改make TextBoxFor必填字段

时间:2015-01-07 05:16:51

标签: javascript c# asp.net-mvc-4 html.dropdownlistfor

我正在开发mvc web应用程序。在这里我有一个下拉列表。 DropDownList中有一些值。这是我的代码

if (commentTypes != null && commentTypes.Count > 0)
{
    <div class="row">
        <div class="col-md-3">
            <label>Type</label>
        </div>
        <div class="col-md-9">
            @Html.DropDownListFor(p => p.CommentType, new SelectList(commentTypes, "Title", "Title"), new { @class = "form-control" })
        </div>
    </div>
}
<div class="row">
    <div class="col-md-3">
        <label>Add / View Comments</label>
    </div>
    <div class="col-md-9">
        @Html.TextAreaFor(p => p.Comments, new { @class = "form-control", maxlength = 1000, rows = "5"})
        <i class="text-warning">Max. 1000 characters allowed</i>            
    </div>
</div>

下拉列表中有一个值,即OTHER当用户选择此值时,我想将required = "required"属性添加到@Html.TextAreaFor(p => p.Comments,并希望将*添加到{{1}这就像Add / View Comments。我没有得到我怎么能实现这个?有人能帮助我吗?

修改

我试过这个

Add / View Comments *

它工作正常。但问题在于下拉中的第一个价值。如果第一个值为@Html.DropDownListFor(p => p.CommentType, new SelectList(commentTypes, "Title", "Title"), new { @id = "ddlComments", @class = "form-control", @onchange = "ddlCommentChangefunc(this.value,'" + commentName + "')" }) <script> function ddlCommentChangefunc(val, commentName) { if (val == commentName) { $('#cmtTxtBox').prop('required', true); $('#lbladdView').text('Add / View Comments *'); } else { $('#cmtTxtBox').prop('required', false); $('#lbladdView').text('Add / View Comments'); } } </script> ,那么它不会显示我的要求。如何显示第一个和其他值?

修改

我试过这个

OTHER

但我不想对此<script> $(document).on("click", "input[type='reset']", function (e) { e.preventDefault(); $("frmEditor")[0].reset(); $("ddlComments").trigger("change"); }); $(document).ready(function () { $('#ddlComments').change(); }); $('#ddlComments').change(function () { var value = $(this).val().toString().toUpperCase(); if (value == '@ViewBag.Other_commentTypes') { $('#cmtTxtBox').prop('required', true); $('#lbladdView').text('Add / View Comments *'); } else { $('#cmtTxtBox').prop('required', false); $('#lbladdView').text('Add / View Comments'); } }); function ddlCommentChangefunc(val, commentName) { if (val.toString().toUpperCase() == commentName) { $('#cmtTxtBox').prop('required', true); $('#lbladdView').text('Add / View Comments *'); } else { $('#cmtTxtBox').prop('required', false); $('#lbladdView').text('Add / View Comments'); } } </script> 进行硬编码。在mvc中,我声明了OTHER这个变量。我想通过这个。

2 个答案:

答案 0 :(得分:1)

JQuery的

$('#Comments').change(function(){
   if($(this).val()=='OTHER')
      $(this).prop('required',true);
});

答案 1 :(得分:-1)

您还可以使用https://foolproof.codeplex.com/中的以下解决方案。下载解决方案并按以下顺序包含js文件。

&#13;
&#13;
<script src="~/Scripts/libs/jquery.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<script src="~/Scripts/MvcFoolproofJQueryValidation.min.js" type="text/javascript"></script>
<script src="~/Scripts/mvcfoolproof.unobtrusive.min.js" type="text/javascript"></script>
&#13;
&#13;
&#13;

在你的模特中

&#13;
&#13;
 [RequiredIf("CommentType", Operator.EqualTo, "OTHER")]
 public string Comments { get; set; }
&#13;
&#13;
&#13;

您必须包含 MVC Foolproof Validation.dll 的引用,您可以从同一位置下载dll。

您也可以覆盖默认消息

 [RequiredIf("CommentType", Operator.EqualTo, "OTHER", ErrorMessage = "Required because of OTHER")]
 public string Comments { get; set; }