jQuery如果单击了单选按钮，则需要电子邮件字段

Question

这是我的问题。
我有一个由剃刀生成的具有多个字段的表单，但我希望仅在单击“系统管理员”单选按钮时才需要电子邮件。 默认为系统用户。

<div class="">@Html.LabelFor(m => m.Email)</div>
     <div class="">
          @Html.TextBoxFor(m => m.Email, new { @class = "form-control required", placeholder = "Email" })
          @Html.ValidationMessageFor(m => m.Email)
     </div>

我什至尝试过在表单控制后删除“必需”并进行验证。

我有2个由剃须刀生成的单选按钮，它们具有相同的名称但值不同。

<div class="inline-editor create-user-roles">
    <input id="UserRole" name="UserRole" type="radio" value="System Administrator">
    <input id="UserRole" name="UserRole" type="radio" value="System User">
</div>

这是我要使用的JQuery函数。

$('input[name="UserRole"]').on('change', function () {
    if ($('input[name="UserRole"]:checked').val() == "System Administrator") {
        $('#Email').rules('add', {
            required: true, messages: { required: "This field is required" }
        });
    }
    else {
        $('#Email').rules('add', {
            required: false
        });
    }
});

Answer 1

我假设您正在使用jQueryValidation [ 从语法上 ]。 将代码更改为以下代码可以解决问题：

$('input[name="UserRole"]').on('change', function () {
if ($(this).is(':checked') && $(this).val() == "System Administrator") {  // `this` refers to the current element that has raised the event, i.e. shorter for `input[name="UserRole"]` in this case
   $('#Email').rules('add', {
        required: true, messages: { required: "This field is required" }
       });
   }
   else {
       $('#Email').rules('remove');  // Take note of this part
   }
});

请注意，您需要 删除 规则。 在特定规则上指定false不会将其删除。

更新：在表单元素上使用.rules()方法要求您已经在表单上调用了[ .validate()方法[ 带空对象 ]。

也就是说，在上述代码块之前添加以下行：

$('#yourFormId').validate({});

//rest of your code where you can add your validation rules with `.rule()`.

Answer 2

好吧，我明白了。 我找到了一种解决所有问题的简单方法。 这是！

$('input[name="UserRole"]').on('change', function () {
    if ($('input[name="UserRole"]:checked').val() == "System Administrator")     {
        $("#Email").removeClass('form-control').addClass('form-control required');
    }
    else {
        $("#Email").removeClass('form-control required').addClass('form-control');
        $("span[for^='Email']").remove();
    }
});