单选按钮呈现为引导数据切换 = 按钮，MVC 验证失败

Question

我正在开发一个带有默认验证的 MVC5 应用程序。模型上的必需属性呈现为 from 中的单选按钮。到目前为止，验证工作正常。如果未选择单选按钮，则会显示一条验证消息，表明尚未选择值。这些选项是模型中 List 的一部分，页面上会呈现多达 10 组单选按钮。

我使用引导程序的 data-toggle=buttons 更改了这些单选按钮。按钮显示正常。但是，如果我现在选择一个按钮，则底层单选按钮不会获​​得点击。很好，我写了一些 jquery 来传播对底层单选按钮的点击。这里出现了问题。即使单选按钮现在得到了一个checked="checked"，mvc验证仍然会打印一个值没有被选择的验证消息。

视图中一组对应的html如下：

<div class="UserRbAnswer btn-group margin" data-toggle="buttons">    
<label class="btn btn-default">
    <input class="myRadioButton valid" data-val="true" data-val-number="The field OptionChoiceId must be a number." data-val-required="Please select a status." id="QuestionResponseList_1__OptionChoiceId" name="QuestionResponseList[1].OptionChoiceId" type="radio" value="1">
    Acceptable
</label>
<label class="btn btn-default">
    <input class="myRadioButton valid" id="QuestionResponseList_1__OptionChoiceId" name="QuestionResponseList[1].OptionChoiceId" type="radio" value="2">
    Not Acceptable
</label>
<label class="btn btn-default active">
    <input class="myRadioButton valid" id="QuestionResponseList_1__OptionChoiceId" name="QuestionResponseList[1].OptionChoiceId" type="radio" value="3" checked="checked">
    Not Applicable
</label>
<div><span class="field-validation-valid" data-valmsg-for="QuestionResponseList[1].OptionChoiceId" data-valmsg-replace="true"></span></div>

您会注意到第三个选项添加了属性检查。我写的传播到单选按钮的jquery如下：

$(document).ready(function(){
    $('.UserRbAnswer .btn').click(function () {
        $(this).find('input:radio').attr('checked', 'checked');
    });
});

如果 MVC 验证识别出现在已选择单选按钮并且不应将此标记为错误，我该如何处理？

目前我没有足够的声誉在此处发布单选按钮的图片，但如果需要，我可以在某个地方进行托管。

还有一个怪癖。我在页面顶部有一个下拉菜单，允许我为页面上的所有单选按钮选择一个值。如果我从此下拉列表中选择一个值，MVC 验证会识别出一个单选按钮已被选中。

此下拉菜单的 HTML：

<select class="OptionSelect">
<option value="0">None</option>
<option value="1">Acceptable</option>
<option value="2">Not Acceptable</option>
<option value="3">Not Applicabale</option>
</select>

对应的jquery：

   $('.OptionSelect').change(function () {            
        var val = this.value;
        //mark all radio buttons as unchecked
        $('.UserRbAnswer :radio').attr('checked', false);
        //select the radio buttons that match
        $('.UserRbAnswer :radio[value=' + val + ']').attr('checked', 'checked')
        //add active class to the labels
        $('[id^="QuestionResponseList_"]').each(function () {
            $(this).parent('label').removeClass('active');
            if (this.checked) $(this).parent('label').addClass('active');
        });
    });

单选按钮具有以下css：

[data-toggle=buttons]>.btn>input[type=radio]    
{
   position: absolute;
   z-index: -1;
   filter: alpha(opacity=0);
   opacity: 0;
}

顶部标签的 z-index 为 +2，因此不显示单选按钮。验证确实绑定到它，但是当我通过 jquery 将选中的单选按钮添加到单选按钮并提交表单时，验证会显示未选择按钮的错误。

请提供一些见解。

Answer 1

默认情况下不对隐藏元素执行不显眼的验证。如果您检查jquery.validate.js 文件，您将看到默认设置包括ignore: ":hidden"。您可以使用

覆盖它

$.validator.setDefaults({ 
  ignore: [] // or ignore: "" depending on the jquery version
});

或（在 document.ready 中）

$('form').validate({
  ignore: []
});

您不需要设置单选按钮状态的脚本，因为单击标签（样式为按钮）无论如何都会切换单选按钮的状态。 Refer fiddle

注意：有点不清楚为什么你有 4 个可能的值但只呈现 3 个选项，所以我不确定你想用这个设计实现什么