MVC3根据下拉菜单上的选项锁定文本框

时间:2012-02-10 21:17:38

标签: c# javascript jquery asp.net-mvc-3 model-view-controller

我正在使用ASP MVC 3创建一个表单,我不仅是Web开发的新手,也是ASP.NET MVC的新手。

用户将有机会从下拉菜单中选择一个给定的问题,或者自己编写。

我要做的是阻止用户输入问题的文本字段,以防用户先前从下拉菜单中选择任何问题。

我可以使用JavaScript或使用MVC(我最好使用MVC代码,但JavaScript也可以使用)。

<tr> 
<td width="40%" height="31">
<div align="right"><strong>Security question:</strong></div>
 </td>
 <td width="60%" height="31"> 
 @Html.DropDownListFor(m => m.PickSecretQuestion, new[] {

   new SelectListItem() { Text = "---select a question --- or create your own below --", Value = "createNew"},
   new SelectListItem() { Text = "Mother's Maiden Name?", Value = "Mother's Maiden Name?"},
   new SelectListItem() { Text = "Father's Middle Name?", Value = "Father's Middle Name?"},
   new SelectListItem() { Text = "What High School did you attend?", Value = "What High School did you attend?"},
   new SelectListItem() { Text = "First company you worked for?", Value = "First company you worked for?"}

   }
    </td>  
    </tr>

     <tr> 
     <td width="40%" height="31">
     <div align="right"><strong>Or create one here:</strong></div>
     </td>
     <td width="60%" height="31"> 
         @Html.TextBoxFor(m => m.SecretQuestion)
         <span style="color:Red">  @Html.ValidationMessageFor(m => m.SecretQuestion </span>
     </td>  
     </tr>

1 个答案:

答案 0 :(得分:0)

使用 jQuery ,这绝对更容易。我就是这样做的:

$('#yourDropDownId').change(function() {
    if ($(this).attr('selectedIndex') == 0)
        $('#yourTextBoxId').attr('disabled', 'disabled');
    else
        $('#yourTextBoxId').removeAttr('disabled');
});

这是真正应该在客户端上处理的逻辑,而不是去服务器。利用 jQuery的强大功能和简单性绝对有意义。

在您的视图中,您可以使用辅助方法的id对象为您的DOM元素设置htmlAttributes。以下是您对TextBoxFor()所做的更改。这会将您的id设置为“yourTextBoxId”。

@Html.TextBoxFor(m => m.SecretQuestion, new { id = "yourTextBoxId" })