如何在MVC中启用/禁用单选按钮？

问题描述：

我正在研究MVC 4

我有一个表格，其中包含以下代码段

I am working on MVC 4

I have a form with following code snippet in View

 @Html.LabelFor(m => m.Title, @Html.DisplayNameFor(m => m.Title))
 @Html.DropDownListFor(m => m.Title, new SelectList(new[] { "Mr", "Mrs" })) 

@Html.LabelFor(m => m.Gender, @Html.DisplayNameFor(m => m.Gender))
@Html.RadioButtonFor(p => p.Gender, "M", new { id = "Male",})
 <label for="Male">Male</label>
@Html.RadioButtonFor(p => p.Gender, "F", new { id = "Female"})
<label for="Female">Female</label>

我想插入自定义客户端验证，当Title为Mr时，应启用男性单选按钮，女性应禁用。

反之亦然。

模型中的代码

I want to insert custom client side validation such that when Title is "Mr" radio button for Male should be enabled and female should be disabled.

and vice versa.

Code in Model

[ValidateGender("Title")]
[Display (Name= "Gender")]
public string Gender {get;set;}

ValidateGender内的代码

Code inside ValidateGender

protected override ValidationResult IsValid(object value, ValidationContext validationContext)
       {
           var containerType = validationContext.ObjectInstance.GetType();
           var field = containerType.GetProperty(this.TitleValid);
           if (field != null)
           {
               var propertyValue = field.GetValue(validationContext.ObjectInstance, null);
               if ((propertyValue == "Mrs"))
               {\\how to disable Male radio Button }
               else if ((propertyValue == "Mr"))
               { \\how to disable FeMale radio Button }
               return ValidationResult.Success;
           }
           return new ValidationResult("null value found");
       }

我无法找到如何执行此操作??提前感谢

I am not able to locate how to perform this??Thanks in advance

答

我用JavaScript做了我的，就像Monster Maker建议的那样。这已经运作了多年。

使用包含以下内容的表格：

I did mine with JavaScript, as Monster Maker suggested. This has been in operation for years.

With a form containing this:

<form id="<removed>" action="<removed>" method="post">
<fieldset>
<label for="Title">Title</label>
<select name="Title" id="Title" onchange="javascript:settitle(document.forms['figcontactform'].Title, document.forms['figcontactform'].Sex);" onblur="javascript:settitle(document.forms['figcontactform'].Title, document.forms['figcontactform'].Sex);" >
    <option value=""></option>
    <option value="Dr">Dr</option>
    <option value="Miss">Miss</option>
    <option value="Mr">Mr</option>
    <option value="Mrs">Mrs</option>
    <option value="Ms">Ms</option>
</select>
<label for="Male">Sex</label>
<input class="radio" type="radio" value="Male" name="Sex" id="Male" onclick="javascript:setsex(document.forms['figcontactform'].Sex, document.forms['figcontactform'].Title)" />Male /
<input class="radio" type="radio" value="Female" name="Sex" id="Female" onclick="javascript:setsex(document.forms['figcontactform'].Sex, document.forms['figcontactform'].Title)" />Female
<!-- ... -->
</fieldset>
</form>

我在链接的javascript文件中有两种方法：

I have two methods in a linked javascript file:

var SexChosen = false;

function settitle(titleselectbox, sexgroup)
{
    var ChosenIndex = titleselectbox.selectedIndex;
    var ItemChosen = titleselectbox.options[ChosenIndex].value;

    if (ItemChosen == "Mr")
    {
        if ((false == sexgroup[0].checked)
            || (true == sexgroup[1].checked))
        {
            sexgroup[0].checked = true;
            sexgroup[1].checked = false;
            SexChosen = false;
        }
    }
    else if ((ItemChosen == "Miss")
            || (ItemChosen == "Mrs")
            || (ItemChosen == "Ms"))
    {
        if ((true == sexgroup[0].checked)
            || (false == sexgroup[1].checked))
        {
            sexgroup[0].checked = false;
            sexgroup[1].checked = true;
            SexChosen = false;
        }
    }
    else
    {
        if (false == SexChosen)
        {
            sexgroup[0].checked = false;
            sexgroup[1].checked = false;
        }
    }
}

function setsex(sexgroup, titleselectbox)
{
    var ChosenIndex = titleselectbox.selectedIndex;
    var ItemChosen = titleselectbox.options[ChosenIndex].value;

    SexChosen = true;
    if (true == sexgroup[0].checked)
    {
        // Make sure that Mrs, Miss or Ms is not selected!
        if ((ItemChosen == "Miss")
                || (ItemChosen == "Mrs")
                || (ItemChosen == "Ms"))
        {
            titleselectbox.selectedIndex = 0;
        }
    }
    else if (true == sexgroup[1].checked)
    {
        // Make sure that Mr is not checked!
        if (ItemChosen == "Mr")
        {
            titleselectbox.selectedIndex = 0;
        }
    }
}

如果用户选择了标题，将自动选择性别（性别） - 除非他们选择性别中立的价值，例如Dr，在这种情况下（如果他们还没有选择性别，如SexChosen变量所记录的那样）性别选择将被清除，因此他们被迫选择它。

如果他们选择的性别或标题与其他设置不兼容，则其他设置将被重置，或者如果可能的话另外设置。

我希望这很有用。正如我所说，这是我在网站上拥有的代码，我管理多年，似乎工作正常。

问候，

Ian。

If the user selects a title, the Sex (Gender) will automatically be selected - unless they select a gender neutral value, such as "Dr", in which case (if they have not selected their gender yet, as recorded by the "SexChosen" variable) the sex selection will be cleared so they are forced to select it.

If they select a gender or a title that is incompatible with the other setting then the other setting will be reset, or set accordingly if possible.

I hope this is useful. As I said, this is code I''ve had on a website that I manage for years, and seems to work fine.

Regards,
Ian.

如何在MVC中启用/禁用单选按钮？

相关推荐