MVC3 блокирует текстовое поле на основе выделения в выпадающем меню

Question

Я делаю форму с использованием ASP MVC 3, и я новичок не только в веб-разработке, но и в 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> 

Answer 1

Это, безусловно, гораздо проще с JQuery. Вот как я бы об этом:

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

Это логика, которая на самом деле должны быть обработаны на клиента вместо того, чтобы сделать поездку в сервер. Это определенно имеет смысл использовать мощность и простоту jQuery.

В вашем представлении вы можете установить id s для своих элементов DOM с помощью объекта htmlAttributes для вспомогательных методов. Вот изменение, которое вы сделаете для своего TextBoxFor(). Это установило бы ваш id на «yourTextBoxId».

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